關于實作文檔線上預覽的做法，之前文章提到了的兩種實作方式：
1、通過将文檔轉成圖檔：詳見《文檔線上預覽新版（一）通過将檔案轉成圖檔實作線上預覽功能》；
2、将文檔轉成html：詳見《文檔線上預覽新版（二）通過将檔案統一轉成html以實作線上預覽》；
3、将文檔轉成pdf：詳見 《文檔線上預覽（三）通過将檔案統一轉成pdf來實作線上預覽》；
其實除了這三種實作方式之外之外，還有一種常見的做法就是在統一都由前端通過相關的線上預覽元件來實作預覽
實作方案
在網上的找了一圈實作方案，發現還挺多開源元件可以實作，整理了一下這些開源元件放在了下面的表格裡，裡面有一些是可以直接通過npm在vue中引入使用。
| 文檔格式 | 相關的開源元件 |
| word(docx) | docx-preview、mammoth |
| pdf.js、pdfobject.js、vue-pdf | |
| excel | sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables |
| powerpoint（pptx） | pptxjs |
一、docx檔案實作前端預覽
1、docx-preview
是一個 純前端的JavaScript庫，它的優點是可以後端就實作對 .docx 的檔案進行線上預覽，但是缺點是 (劃重點)。
github位址：https://github.com/VolodymyrBaydalka/docxjs
demo示例
安裝：
npm install docx-preview -S
使用效果：
2、Mammoth
Mammoth 原理是将 .docx 文檔并将其轉換為 HTML。 注意Mammoth 轉換過程中複雜樣式被忽，居中、首行縮進等，此外同樣也隻能轉換.docx文檔。
github位址：https://github.com/mwilliamson/mammoth.js
安裝：
npm install mammoth
二、PDF檔案實作前端預覽
1、pdf.js
pdf.js是一款非常優秀的pdf解析工具，其實火狐浏覽器核心自帶pdf預覽解析器就是pdf.js這個解析器，我們用火狐浏覽器打開pdf檔案并按F12打開控制台可以看到源碼内容。
官網位址：http://mozilla.github.io/pdf.js
github位址：https://github.com/mozilla/pdf.js
demo示例
使用效果：
2、pdfobject.js
PDFObject.js - 将PDF嵌入到一個div内，而不是占據整個頁面，要求浏覽器支援顯示PDF（主流浏覽器都支援），如果浏覽器不支援，也可通過配置PDF.js來實作
官網位址: https://pdfobject.com/
github位址：https://github.com/pipwerks/PDFObject
實作效果：
3、vue-pdf
Vue-pdf是通過Vue下基礎基于 pdf.js 元件實作PDF檔案的展示，操作和生成的元件。
github位址：https://github.com/FranckFreiburger/vue-pdf
demo示例
安裝：
npm install --save vue-pdf
實作效果：
4、iframe / object/ embed
iframe / object / embed 使用方法和效果都同理，即将 pdf 作為插件内嵌在這三個HTML标簽内，以下用 iframe 為例，效果就如同直接用連結打開 pdf 檔案是一樣的，相當于一個新的頁面内嵌在目前頁面中。
<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>
實作效果：
三、Excel檔案實作前端預覽
1、sheetjs js-xlsx
js-xlsx是sheetJS出品的讀取和導出各種ecxel的工具庫，功能十分強大。
xlsx官方文檔：https://www.npmjs.com/package/xlsx
github倉庫： https://github.com/SheetJS/sheetjs
安裝：
npm install xlsx
js-xlsx可以用二進制流方式讀取得到整份excel表格對象
let workbook = XLSX.read(data, { type: "array" }); //表格對象
let sheetNames = workbook.SheetNames; //擷取到所有表格
let worksheet = workbook.Sheets[sheetNames[0]]; //取第一張表
擷取表格資料後再調用js-xlsx提供的方法，直接将表格資料轉換為html代碼，再将html代碼渲染到指定容器就完成了
let html = XLSX.utils.sheet_to_html(worksheet);
實作效果：
2、canvas-datagrid
基于 canvas 來渲染表格，支援表格過濾、資料編輯、自定義操作菜單、大資料場景優化、主題樣式修改
github位址：https://github.com/TonyGermaneri/canvas-datagrid
demo示例
安裝：
npm install canvas-datagrid
3、 handsontable
handsontable基于 DOM 元素來渲染表格，功能強大，canvas-datagrid` 支援的功能它都支援，并且主題樣式擴充更友善
官網位址：https://handsontable.com/docs/7.1.0/tutorial-custom-build.html
github位址：https://github.com/handsontable/handsontable
文檔位址：https://handsontable.com/docs/javascript-data-grid
安裝：
npm install handsontable @handsontable/vue
Demo示例
實作效果：
4、DataTables
基于Jquery 表格插件DataTables的一個表格插件，還在用Jquery 可以以考慮這個
官網位址：https://www.datatables.net
安裝：
官網下載下傳位址，在你的項目中使用 DataTables，隻需要引入三個個檔案即可，jQuery庫，一個DataTables的核心js檔案和一個DataTables的css檔案。有的時候還需要DataTables樣式的一些資源。
<link href="DataTables/datatables.min.css" rel="stylesheet"/>
<script src="DataTables/datatables.min.js"></script>
使用方式：
$('#example').DataTable( {
data: data
} );
四、pptx檔案實作前端預覽
1、PPTXJS
PPTXJS是jquery的一個插件，她的主要功能是實作pptx轉html，用于線上進行展示
官網位址：https://pptx.js.org/index.html
github位址：https://github.com/meshesha/PPTXjs
PPTXjs | Demos
使用示例：
<div id="slide-resolte-contaniner" ></div>
<script>
$("#slide-resolte-contaniner").pptxToHtml({
pptxFileUrl: "Sample_demo1.pptx",
slidesScale: "50%",
slideMode: false,
keyBoardShortCut: false
});
</script>
實作效果：
總結
本文主要介紹了word、excel、pdf、ppt等檔案純前端實作線上預覽的方式，具體實作可以是：
1、前端根據不同檔案類型使用對應的線上預覽元件進行線上預覽。
前端通過判斷不同檔案類型的使用對應的線上預覽元件進行線上預覽。 因為不同類型的線上預覽元件不一樣在使用時預覽界面會存在差異，如果需要做的完善一點 最好是把所有用到的元件都統一封裝的一個線上預覽的UI界面中。
2、後端配合将不同格式的檔案轉換成pdf，轉成統一的檔案格式，再由前端實作預覽效果
從本文的測試情況來看前端實作預覽最好的效果還是PDF，不會出現一些文字錯亂和亂碼的問題，這樣能保留檔案的一些樣式的效果，同時前端也隻用支援一種檔案格式的預覽，工作量也能大大降低。
以上就是使用js前端實作word、excel、pdf、ppt等檔案線上預覽的方式的全部内容，感謝大家的閱讀！