zoukankan      html  css  js  c++  java
  • 前端实现在线预览pdf、docx、xls、ppt等文件

    思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上。

    关键点:reveal.js

    参考文章:https://www.awesomes.cn/repo/hakimel/reveal.js

    百度文库预览ppt:https://wenku.baidu.com/browse/getbcsurl?doc_id=9c6b472924c52cc58bd63186bceb19e8b8f6ec06&pn=1&rn=99999&type=ppt&callback=jQuery1101044933827714500585_1566757047431&_=1566757047432

    总结:预览.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      //内网不可用,可惜了

    <a href="http://www.xdocin.com/xdoc?_func=to&amp;_format=html&amp;_cache=1&amp;_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">XDOC</a>//方法一致,内网不可用,可惜了
     
    借助微软提供的方法,但是内网是不可用的,所有这个方法passed掉~~

    2.预览pdf文档:

    2.1

    可以直接a标签重开一个页面进行预览  

    <a href="http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf" target="_blank">PPT在线预览</a>
    适用场景:
     首次进来的时候只显示文件名称,当点击预览的时候,才会重新打开一个窗口进行预览
    2.2
    PDFObject.js (这种方法ie浏览器不支持)
    <!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>
     
     2.2
     

    代码地址:下载运行可以使用: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  注:这篇文章是给我们后台看的

    我真厉害,既做前端又操后台的心

  • 相关阅读:
    ResourceManager总体架构
    Yarn聚合日志
    Hive参数配置方法
    Hive任务日志及日志调试
    bugku web web3
    bugku web 矛盾
    bugku web web基础
    Bugku 杂项 眼见非实
    Bugku 杂项 啊哒
    JarvisOJ Basic Help!!
  • 原文地址:https://www.cnblogs.com/DZzzz/p/11405846.html
Copyright © 2011-2022 走看看