思路:前台將各種格式的附件上傳到服務器----后台通過方法將這些格式的文件轉化成圖片,前台通過放映ppt的方式將其展示在頁面上。
關鍵點:reveal.js
參考文章:https://www.awesomes.cn/repo/hakimel/reveal.js
總結:預覽.pdf文件可以直接在瀏覽器中打開
總結
1、免費純前端方式實現在線預覽word、excel、ppt最優選擇微軟在線預覽(不可編輯)
2、利用后端將文件轉為圖片,前端以圖片形式預覽(可行方案)
3、購買在線預覽服務例如百度DOC文檔服務、永中、I DOC VIEW等
https://www.idocv.com/examples.html I DOC VIEW等 標重點 要錢
1.預覽doxc文檔:https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/3.docx //內網不可用,可惜了
2.預覽pdf文檔:
2.1
可以直接a標簽重開一個頁面進行預覽
<!DOCTYPE html> <html> <head> <title>Show PDF</title> <meta charset="utf-8" /> <script type="text/javascript" src='http://jhyt.oss-cn-shanghai.aliyuncs.com/images/1531367199089_PDFObject.js'></script> <style type="text/css"> html,body,#pdf_viewer{ width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="pdf_viewer"></div> </body> <script type="text/javascript"> if(PDFObject.supportsPDFs){ // PDF嵌入到網頁 PDFObject.embed("index.pdf", "#pdf_viewer" ); } else { location.href = "/canvas"; } // 還可以通過以下代碼進行判斷是否支持PDFObject預覽 if(PDFObject.supportsPDFs){ console.log("Yay, this browser supports inline PDFs."); } else { console.log("Boo, inline PDFs are not supported by this browser"); } </script> </html>
代碼地址:下載運行可以使用:https://github.com/zhongqiulan/ppt //內網可以使用,非常好
關鍵知識點:jquery.media.js插件
3.
2、word、xls、ppt文件在線預覽功能
word、ppt、xls文件實現在線預覽的方式比較簡單可以直接通過調用微軟的在線預覽功能實現 (預覽前提:資源必須是公共可訪問的)
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'> </iframe>
參考文章:
1。https://www.iteye.com/blog/vtrtbb-601267 java轉換ppt為圖片 (后台看的)
3.預覽圖片:jQuery-fancybox圖片//內網可以使用,非常棒
4.https://www.kissfree.cn/2778.html
前端實現在線預覽pdf、word、xls、ppt等文件
參考博客:
1.https://blog.csdn.net/fyhx2010/article/details/69569310 docx、ppt、xls、pdf文件轉html 注:這篇文章是給我們后台看的
我真厲害,既做前端又操后台的心