前端技術(shù)實(shí)現(xiàn)文件預(yù)覽（word、excel、pdf、ppt、mp4、圖片、文本）
前端瓶子君，關(guān)注公眾號(hào)
回復(fù)算法，加入前端編程面試算法每日一題群
前言
因?yàn)闃I(yè)務(wù)需要，很多文件需要在前端實(shí)現(xiàn)預(yù)覽，今天就來了解一下吧。
Demo地址[1]：https://zhuye1993.github.io/file-view/dist/index.html
實(shí)現(xiàn)方案
找了網(wǎng)上的實(shí)現(xiàn)方案，效果看起來不錯(cuò)，放在下面的表格里，里面有一些是可以直接通過npm在vue中引入使用。
| 文檔格式 | 老的開源組件 | 替代開源組件 |
|---|---|---|
| word（docx） | mammoth | docx-preview(npm) |
| powerpoint（pptx） | pptxjs | pptxjs改造開發(fā) |
| excel（xlsx） | sheetjs、handsontable | exceljs(npm)、handsontable(npm)(npm) |
| pdf（pdf） | pdfjs | pdfjs(npm) |
| 圖片 | jquery.verySimpleImageViewer | v-viewer(npm) |
docx文件實(shí)現(xiàn)前端預(yù)覽
代碼實(shí)現(xiàn)
首先npm i docx-preview 引入renderAsync方法 將blob數(shù)據(jù)流傳入方法中，渲染word文檔
import?{?defaultOptions,?renderAsync?}?from?"docx-preview";
renderAsync(buffer,?document.getElementById("container"),?null,
options:?{
???????className:?string?=?"docx",?//?默認(rèn)和文檔樣式類的類名/前綴
???????inWrapper:?boolean?=?true,?//?啟用圍繞文檔內(nèi)容渲染包裝器
???????ignoreWidth:?boolean?=?false,?//?禁止頁面渲染寬度
???????ignoreHeight:?boolean?=?false,?//?禁止頁面渲染高度
???????ignoreFonts:?boolean?=?false,?//?禁止字體渲染
???????breakPages:?boolean?=?true,?//?在分頁符上啟用分頁
???????ignoreLastRenderedPageBreak:?boolean?=?true,//禁用lastRenderedPageBreak元素的分頁
???????experimental:?boolean?=?false,?//啟用實(shí)驗(yàn)性功能（制表符停止計(jì)算）
???????trimXmlDeclaration:?boolean?=?true,?//如果為真，xml聲明將在解析之前從xml文檔中刪除
???????debug:?boolean?=?false,?//?啟用額外的日志記錄
???}
);
復(fù)制代碼
實(shí)現(xiàn)效果
pdf實(shí)現(xiàn)前端預(yù)覽
代碼實(shí)現(xiàn)
首先npm i pdfjs-dist 設(shè)置PDFJS.GlobalWorkerOptions.workerSrc的地址 通過PDFJS.getDocument處理pdf數(shù)據(jù)，返回一個(gè)對(duì)象pdfDoc 通過pdfDoc.getPage單獨(dú)獲取第1頁的數(shù)據(jù) 創(chuàng)建一個(gè)dom元素，設(shè)置元素的畫布屬性 通過page.render方法，將數(shù)據(jù)渲染到畫布上
import?*?as?PDFJS?from?"pdfjs-dist/legacy/build/pdf";
//?設(shè)置pdf.worker.js文件的引入地址
PDFJS.GlobalWorkerOptions.workerSrc?=?require("pdfjs-dist/legacy/build/pdf.worker.entry.js");
//?data是一個(gè)ArrayBuffer格式，也是一個(gè)buffer流的數(shù)據(jù)
PDFJS.getDocument(data).promise.then(pdfDoc=>{
????const?numPages?=?pdfDoc.numPages;?//?pdf的總頁數(shù)
????//?獲取第1頁的數(shù)據(jù)
????pdfDoc.getPage(1).then(page?=>{
?????//?設(shè)置canvas相關(guān)的屬性
?????const?canvas?=?document.getElementById("the_canvas");
?????const?ctx?=?canvas.getContext("2d");
?????const?dpr?=?window.devicePixelRatio?||?1;
?????const?bsr?=
???????ctx.webkitBackingStorePixelRatio?||
???????ctx.mozBackingStorePixelRatio?||
???????ctx.msBackingStorePixelRatio?||
???????ctx.oBackingStorePixelRatio?||
???????ctx.backingStorePixelRatio?||
???????1;
?????const?ratio?=?dpr?/?bsr;
?????const?viewport?=?page.getViewport({?scale:?1?});
?????canvas.width?=?viewport.width?*?ratio;
?????canvas.height?=?viewport.height?*?ratio;
?????canvas.style.width?=?viewport.width?+?"px";
?????canvas.style.height?=?viewport.height?+?"px";
?????ctx.setTransform(ratio,?0,?0,?ratio,?0,?0);
?????const?renderContext?=?{
???????canvasContext:?ctx,
???????viewport:?viewport,
?????};
?????//?數(shù)據(jù)渲染到canvas畫布上
?????page.render(renderContext);
????})
})
復(fù)制代碼
實(shí)現(xiàn)效果
excel實(shí)現(xiàn)前端預(yù)覽
代碼實(shí)現(xiàn)
下載exceljs、handsontable的庫 通過exceljs讀取到文件的數(shù)據(jù) 通過workbook.getWorksheet方法獲取到每一個(gè)工作表的數(shù)據(jù)，將數(shù)據(jù)處理成一個(gè)二維數(shù)組的數(shù)據(jù) 引入@handsontable/vue的組件HotTable 通過settings屬性，將一些配置參數(shù)和二維數(shù)組數(shù)據(jù)傳入組件，渲染成excel樣式，實(shí)現(xiàn)預(yù)覽
//?加載excel的數(shù)據(jù)
（new?ExcelJS.Workbook().xlsx.load(buffer)).then(workbook=>{
???//?獲取excel的第一頁的數(shù)據(jù)
???const?ws?=?workbook.getWorksheet(1);
???//?獲取每一行的數(shù)據(jù)
???const?data?=?ws.getRows(1,?ws.actualRowCount);
?})
?
?
//?渲染頁面
import?{?HotTable?}?from?"@handsontable/vue";
<hot-table??:settings="hotSettings">hot-table>
hotSettings?=?{
???language:?"zh-CN",
???readOnly:?true,
???data:?this.data,
???cell:?this.cell,
???mergeCells:?this.merge,
???colHeaders:?true,
???rowHeaders:?true,
???height:?"calc(100vh?-?107px)",
???//?contextMenu:?true,
???//?manualRowMove:?true,
???//?關(guān)閉外部點(diǎn)擊取消選中時(shí)間的行為
???outsideClickDeselects:?false,
???//?fillHandle:?{
???//???direction:?'vertical',
???//???autoInsertRow:?true
???//?},
???//?afterSelectionEnd:?this.afterSelectionEnd,
???//?bindRowsWithHeaders:?'strict',
???licenseKey:?"non-commercial-and-evaluation"
}
復(fù)制代碼
實(shí)現(xiàn)效果
pptx的前端預(yù)覽
主要是通過jszip庫，加載二進(jìn)制文件，再經(jīng)過一些列處理處理轉(zhuǎn)換實(shí)現(xiàn)預(yù)覽效果，實(shí)現(xiàn)起來比較麻煩，就不貼代碼了，感興趣的可以下載代碼查看。
實(shí)現(xiàn)效果
總結(jié)
主要介紹了word、excel、pdf文件實(shí)現(xiàn)預(yù)覽的方式，前端實(shí)現(xiàn)預(yù)覽最好的效果還是PDF，不會(huì)出現(xiàn)一些文字錯(cuò)亂和亂碼的問題，所以一般好的方案就是后端配合將不同格式的文件轉(zhuǎn)換成pdf，再由前端實(shí)現(xiàn)預(yù)覽效果，將會(huì)保留文件的一些樣式的效果，對(duì)于圖片、txt文件的實(shí)現(xiàn)，感興趣的可以看下代碼。
最后
看到這里，如果這篇文章對(duì)你有幫助的話，歡迎大家點(diǎn)贊~
代碼地址
github.com/zhuye1993/f…[2]：https://github.com/zhuye1993/file-view
關(guān)于本文
作者：竹業(yè)
https://juejin.cn/post/7071598747519549454
最后
評(píng)論
圖片
表情