思路:前台将各类格式的附件上传到服务器----后台经过方法将这些格式的文件转化成图片,前台经过放映ppt的方式将其展现在页面上。javascript
关键点:reveal.jscss
参考文章:https://www.awesomes.cn/repo/hakimel/reveal.jshtml
总结:预览.pdf文件能够直接在浏览器中打开java
总结jquery
一、免费纯前端方式实如今线预览word、excel、ppt最优选择微软在线预览(不可编辑)
二、利用后端将文件转为图片,前端以图片形式预览(可行方案)
三、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等 git
https://www.idocv.com/examples.html I DOC VIEW等 标重点 要钱github
1.预览doxc文档:https://view.officeapps.live.com/op/view.aspx?src=http://mczaiyun.top/ht/3.docx //内网不可用,惋惜了canvas
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.
二、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 注:这篇文章是给咱们后台看的
我真厉害,既作前端又操后台的心