前端實現在線預覽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  注:這篇文章是給我們后台看的

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM