前端實現文檔在線預覽

1.Jquery.media.js

test.js：

但是這種只能實現PDF預覽功能（包括其他各種媒體文件）

 

2.PDF.JS

這是一個開源的JS庫，PDF.js可以實現在線預覽PDF文檔，核心部分是PDF.js和PDF.Worker.js，一個負責API解析，一個負責核心解析。

PDF.js可在官網下載 地址：http://mozilla.github.io/pdf.js/

Vue中使用，將PDF文件渲染成CANVAS

安裝並引入PDF.JS：

1. npm i pdfjs-dist
2. import PDFJS from 'pdfjs-dist'

加載PDF文件：

 

 

3.微軟的在線預覽功能

word、ppt、xls文件實現在線預覽的方式比較簡單可以直接通過調用微軟的在線預覽功能實現 (預覽前提：資源必須是公共可訪問的)

“https://view.officeapps.live.com/op/view.aspx?src=”的后面拼上你的服務器word文件地址

注意：

1. 最好通過encode處理一下url地址，可以使用encodeURIComponent()方法
2. 這個文件的服務器地址必須是域名，不可以使用ip地址，且端口需要是80；（這也是不太方便的一個限制條件，第三方的一般無此限制）

4.excel文檔

查閱發現較熱門的JS庫就是SheetJS js-xlsx，demo自取：

https://jstool.gitlab.io/zh-cn/demo/sheetjs-xlsx-js/

 

5.永中DCS

可以看出前端實現的方法比較少、局限性很高，一些JS庫的英語文檔看的比較吃力，所以現在來推薦一個第三方服務-----永中DCS。

 

永中的文檔可以設置私有和公開的兩種方式：

公有雲（永中雲轉換）有免費版本（https://api.yozocloud.cn/）

私有雲（https://www.yozodcs.com/index.html）

 

打開官網示例，可以看見支持的格式很多，上傳文檔后不僅在PC端可以查看，還可以掃描二維碼查看，並且還支持其他的一些功能（建議官網一試）：

 

 查看預覽：

 

 接着來看看API，內容詳細，部署環境分為Linux和Windows，各種開發語言的調用也有：

 

 

來看看我們需要的web調用：

1. 配置ajaxfileupload.js （https://github.com/blueimp/jQuery-File-Upload）
2. 參數部分：

　　　　1) url：服務器請求url

　　　　2) convertType：轉換類型參數（必須）

　　　　3) downloadUrl：要預覽的文檔url

 

（具體參數請移至官網查看https://www.yozodcs.com/page/help.html）

成功后的data會返回一個html出來，方便快捷。