整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前有許多在線轉檔工具可以解決使用者的格式轉換需求，共通性是通過瀏覽器開啟網站即可進行轉換，無需額外下載、安裝軟件或工具，因為這些服務多半將文件上傳遠程服務器進行處理，即使是移動設備也能正常執行，例如 Convertr 就整合音訊、影片和其他文件格式的在線轉檔：
本文要介紹的「cdkm」是一個免費在線轉檔工具，號稱次世代轉換器、整合許多開放原始碼項目建構而成，支持各種常見常用文件類型，包括文件、電子書、圖片、影片、音樂或是一些比較少用的格式，不過要注意的是 cdkm 每次轉換最多只能上傳 10 個文件（如果有開啟廣告阻擋器就無法使用批次轉換功能）。
cdkm 可轉檔的文件文件最大 40 MB，其他格式文件最大 200 MB，雖然轉換速度快，若遇到文件過大就有很大的機會無法成功轉換。
cdkm 支持以下格式（完整列表）：
轉換后文件可直接下載或是產生分享鏈接，提供給其他人下載、使用，有些文件格式還能直接在瀏覽器進行預覽，如果臨時需要轉檔、但手邊又沒有合適的轉檔工具就可以試試看。
網站鏈接：https://cdkm.com/
使用教學
開啟 cdkm 網站后點選「Choose Files」選擇要轉換的源文件或選擇「remote file URL」以遠程文件鏈接方式輸入文件進行轉換。
cdkm 不會自動選擇可轉換的格式，使用者需要從右側的「Target Format」目標格式選擇要轉換的文件新格式，依照不同類型分類更容易尋找。
選好后點選最右邊的紅色按鈕「Start Convertsion」開始轉換，轉換時需要一段時間將文件上傳到遠程服務器，完成后結果文件就會顯示在下方的 Output Files 字段，點選后方「Download」按鈕就能將轉換后的文件下載保存。
有些文件還可以直接在線預覽，如果要復制下載鏈接可點選「Copy to clipboard」就能將文件網址復制到剪貼簿。
值得一試的三個理由：
于實現文檔在線預覽的做法，之前文章提到了的兩種實現方式：
1、通過將文檔轉成圖片：詳見《文檔在線預覽（一）通過將txt、word、pdf轉成圖片實現在線預覽功能》；
2、將文檔轉成html：詳見《文檔在線預覽（二）word、pdf文件轉html以實現文檔在線預覽》；
其實除了這兩種實現方式之外之外，還有一種常見的做法就是在前端在通過相關的在線預覽組件來實現預覽
在網上的找了一圈實現方案，發現還挺多開源組件可以實現，整理了一下這些開源組件放在了下面的表格里，里面有一些是可以直接通過npm在vue中引入使用。
文檔格式 | 相關的開源組件 |
word(docx) | docx-preview、mammoth |
pdf.js、pdfobject.js、vue-pdf | |
excel | sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables |
powerpoint（pptx） | pptxjs |
是一個 純前端的JavaScript庫，它的優點是可以后端就實現對 .docx 的文件進行在線預覽，但是缺點是 不支持.doc(劃重點)。
github地址：https://github.com/VolodymyrBaydalka/docxjs
demo示例
安裝：
npm install docx-preview -S
使用效果：
??Mammoth 原理是將 .docx 文檔并將其轉換為 HTML。 注意Mammoth 轉換過程中復雜樣式被忽，居中、首行縮進等，此外同樣也只能轉換.docx文檔。
github地址：https://github.com/mwilliamson/mammoth.js
安裝：
npm install mammoth
pdf.js是一款非常優秀的pdf解析工具，其實火狐瀏覽器內核自帶pdf預覽解析器就是pdf.js這個解析器，我們用火狐瀏覽器打開pdf文件并按F12打開控制臺可以看到源碼內容。
官網地址：http://mozilla.github.io/pdf.js
github地址：https://github.com/mozilla/pdf.js
demo示例
使用效果：
PDFObject.js - 將PDF嵌入到一個div內，而不是占據整個頁面，要求瀏覽器支持顯示PDF（主流瀏覽器都支持），如果瀏覽器不支持，也可通過配置PDF.js來實現
官網地址: https://pdfobject.com/
github地址：https://github.com/pipwerks/PDFObject
實現效果：
Vue-pdf是通過Vue下基礎基于 pdf.js 組件實現PDF文件的展示，操作和生成的組件。
github地址：https://github.com/FranckFreiburger/vue-pdf
demo示例
安裝：
npm install --save vue-pdf
實現效果：
iframe / object / embed 使用方法和效果都同理，即將 pdf 作為插件內嵌在這三個HTML標簽內，以下用 iframe 為例，效果就如同直接用鏈接打開 pdf 文件是一樣的，相當于一個新的頁面內嵌在當前頁面中。
<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>
實現效果：
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);
實現效果：
? 基于 canvas 來渲染表格，支持表格過濾、數據編輯、自定義操作菜單、大數據場景優化、主題樣式修改
github地址：https://github.com/TonyGermaneri/canvas-datagrid
demo示例
安裝：
npm install canvas-datagrid
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示例
實現效果：
基于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
} );
### 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界面中。
從本文的測試情況來看前端實現預覽最好的效果還是PDF，不會出現一些文字錯亂和亂碼的問題，這樣能保留文件的一些樣式的效果，同時前端也只用支持一種文件格式的預覽，工作量也能大大降低。
以上就是使用js前端實現word、excel、pdf、ppt等文件在線預覽的方式的全部內容，感謝大家的閱讀！
于實現文檔在線預覽的做法，之前文章提到了的兩種實現方式：
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 |
是一個 純前端的JavaScript庫，它的優點是可以后端就實現對 .docx 的文件進行在線預覽，但是缺點是 不支持.doc(劃重點)。
github地址：https://github.com/VolodymyrBaydalka/docxjs
demo示例：https://volodymyrbaydalka.github.io/docxjs
安裝：
npm install docx-preview -S使用效果：
Mammoth 原理是將 .docx 文檔并將其轉換為 HTML。 注意Mammoth 轉換過程中復雜樣式被忽，居中、首行縮進等，此外同樣也只能轉換.docx文檔。
github地址：https://github.com/mwilliamson/mammoth.js
安裝：
npm install mammothpdf.js是一款非常優秀的pdf解析工具，其實火狐瀏覽器內核自帶pdf預覽解析器就是pdf.js這個解析器，我們用火狐瀏覽器打開pdf文件并按F12打開控制臺可以看到源碼內容。
官網地址：http://mozilla.github.io/pdf.js
github地址：https://github.com/mozilla/pdf.js
demo示例：https://mozilla.github.io/pdf.js/web/viewer.html
使用效果：
PDFObject.js - 將PDF嵌入到一個div內，而不是占據整個頁面，要求瀏覽器支持顯示PDF（主流瀏覽器都支持），如果瀏覽器不支持，也可通過配置PDF.js來實現
官網地址: https://pdfobject.com/
github地址：https://github.com/pipwerks/PDFObject
實現效果：
Vue-pdf是通過Vue下基礎基于 pdf.js 組件實現PDF文件的展示，操作和生成的組件。
github地址：https://github.com/FranckFreiburger/vue-pdf
demo示例：https://jsfiddle.net/fossfiddler/5k4ptmqg/145/
安裝：
npm install --save vue-pdf實現效果：
iframe / object / embed 使用方法和效果都同理，即將 pdf 作為插件內嵌在這三個HTML標簽內，以下用 iframe 為例，效果就如同直接用鏈接打開 pdf 文件是一樣的，相當于一個新的頁面內嵌在當前頁面中。
<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>實現效果：
js-xlsx是sheetJS出品的讀取和導出各種ecxel的工具庫，功能十分強大。
xlsx官方文檔：https://www.npmjs.com/package/xlsx
github倉庫： https://github.com/SheetJS/sheetjs
安裝：
npm install xlsxjs-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);實現效果：
基于 canvas 來渲染表格，支持表格過濾、數據編輯、自定義操作菜單、大數據場景優化、主題樣式修改
github地址：https://github.com/TonyGermaneri/canvas-datagrid
demo示例：https://codesandbox.io/s/handsontable-vue-data-grid-hello-world-app-forked-z288wy
安裝：
npm install canvas-datagrid
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/vueDemo示例：https://handsontable.com/demo
實現效果：
基于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
} );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等文件純前端實現在線預覽的方式，具體實現可以是：
前端通過判斷不同文件類型的使用對應的在線預覽組件進行在線預覽。 因為不同類型的在線預覽組件不一樣在使用時預覽界面會存在差異，如果需要做的完善一點 最好是把所有用到的組件都統一封裝的一個在線預覽的UI界面中。
從本文的測試情況來看前端實現預覽最好的效果還是PDF，不會出現一些文字錯亂和亂碼的問題，這樣能保留文件的一些樣式的效果，同時前端也只用支持一種文件格式的預覽，工作量也能大大降低。
以上就是使用js前端實現word、excel、pdf、ppt等文件在線預覽的方式的全部內容，感謝大家的閱讀！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
