1、前端實現pdf文件在線預覽功能
方式一: 通過a標籤href屬性實現
pdf文件理論上可以在瀏覽器直接打開預覽但是需要打開新頁面。在僅僅是預覽pdf文件且UI要求不高的情況下可以直接通過a標籤href屬性實現預覽
<a href="文檔地址"> </a> |
方式二: 通過jquery插件jquery.media.js實現
這個插件可以實現pdf預覽功能(包括其他各種媒體文件)但是對word等類型的文件無能爲力。
實現方式:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> |
方式三: 直接通過頁面內嵌iframe
$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview")); |
方式四: 通過標籤嵌入內容
<embed :src="previewUrl" type="application/pdf" width="100%" height="100%"> |
方式五: 標籤和iframe使用差別較小
<object :src="previewUrl" width="100%" height="100%"> |
除方式二以外其他都是直接通過標籤將內容引入頁面實現預覽
方式六: PDFObject
PDFObject實際上也是通過標籤實現的直接上代碼
|
方式七: PDF.js (簡單粗暴)
PDF.js可以實現在html下直接瀏覽pdf文檔,是一款開源的pdf文檔讀取解析插件,非常強大,能將PDF文件渲染成Canvas。PDF.js主要包含兩個庫文件,一個pdf.js和一個pdf.worker.js,一個負責API解析,一個負責核心解析。
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'> |
3、word文件
XDOC可以實現預覽以DataURI表示的DOC文檔,此外XDOC還可以實現文本、帶參數文本、html文本、json文本、公文等在線預覽,具體實現方法請看官方文檔下面這種方式可以實現快速預覽word但是對文件使用的編輯器可能會有一些限制
<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">XDOC</a> |
4、excel文件
目前excel文件已經有了類似pdf.js那樣的解析sheet.js
總結
1、免費純前端方式實現在線預覽word、excel、ppt最優選擇微軟在線預覽(不可編輯)
2、利用後端將文件轉爲圖片,前端以圖片形式預覽(可行方案)
3、購買在線預覽服務例如百度DOC文檔服務、永中、I DOC VIEW等