js前端實現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預(yù)覽
前言
因為業(yè)務(wù)需要,很多文件需要在前端實現(xiàn)預(yù)覽,今天就來了解一下吧。
可以點擊下面地址體驗喔
實現(xiàn)方案
找了網(wǎng)上的實現(xiàn)方案,效果看起來不錯,放在下面的表格里,里面有一些是可以直接通過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文件實現(xiàn)前端預(yù)覽
代碼實現(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", // 默認和文檔樣式類的類名/前綴
inWrapper: boolean = true, // 啟用圍繞文檔內(nèi)容渲染包裝器
ignoreWidth: boolean = false, // 禁止頁面渲染寬度
ignoreHeight: boolean = false, // 禁止頁面渲染高度
ignoreFonts: boolean = false, // 禁止字體渲染
breakPages: boolean = true, // 在分頁符上啟用分頁
ignoreLastRenderedPageBreak: boolean = true,//禁用lastRenderedPageBreak元素的分頁
experimental: boolean = false, //啟用實驗性功能(制表符停止計算)
trimXmlDeclaration: boolean = true, //如果為真,xml聲明將在解析之前從xml文檔中刪除
debug: boolean = false, // 啟用額外的日志記錄
}
);
實現(xiàn)效果

pdf實現(xiàn)前端預(yù)覽
代碼實現(xiàn)
- 首先npm i pdfjs-dist
- 設(shè)置PDFJS.GlobalWorkerOptions.workerSrc的地址
- 通過PDFJS.getDocument處理pdf數(shù)據(jù),返回一個對象pdfDoc
- 通過pdfDoc.getPage單獨獲取第1頁的數(shù)據(jù)
- 創(chuàng)建一個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是一個ArrayBuffer格式,也是一個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);
})
})
實現(xiàn)效果

excel實現(xiàn)前端預(yù)覽
代碼實現(xiàn)
- 下載exceljs、handsontable的庫
- 通過exceljs讀取到文件的數(shù)據(jù)
- 通過workbook.getWorksheet方法獲取到每一個工作表的數(shù)據(jù),將數(shù)據(jù)處理成一個二維數(shù)組的數(shù)據(jù)
- 引入@handsontable/vue的組件HotTable
- 通過settings屬性,將一些配置參數(shù)和二維數(shù)組數(shù)據(jù)傳入組件,渲染成excel樣式,實現(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)閉外部點擊取消選中時間的行為
outsideClickDeselects: false,
// fillHandle: {
// direction: 'vertical',
// autoInsertRow: true
// },
// afterSelectionEnd: this.afterSelectionEnd,
// bindRowsWithHeaders: 'strict',
licenseKey: "non-commercial-and-evaluation"
}
實現(xiàn)效果

pptx的前端預(yù)覽
主要是通過jszip庫,加載二進制文件,再經(jīng)過一些列處理處理轉(zhuǎn)換實現(xiàn)預(yù)覽效果,實現(xiàn)起來比較麻煩,就不貼代碼了,感興趣的可以下載代碼查看。
實現(xiàn)效果

總結(jié)
主要介紹了word、excel、pdf文件實現(xiàn)預(yù)覽的方式,前端實現(xiàn)預(yù)覽最好的效果還是PDF,不會出現(xiàn)一些文字錯亂和亂碼的問題,所以一般好的方案就是后端配合將不同格式的文件轉(zhuǎn)換成pdf,再由前端實現(xiàn)預(yù)覽效果,將會保留文件的一些樣式的效果,對于圖片、txt文件的實現(xiàn),感興趣的可以看下代碼。
參考資料
以上就是js前端實現(xiàn)word excel pdf ppt mp4圖片文本等文件預(yù)覽的詳細內(nèi)容,更多關(guān)于js預(yù)覽mp4圖片文本文件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS中 querySelector 與 getElementById 方法區(qū)別
這篇文章主要介紹了JavaScript中 querySelector 與 getElementById 方法與區(qū)別,圍繞querySelector 與 getElementById 的相關(guān)資料展開文章內(nèi)容,需要的朋友可以參考一下2021-10-10
JS前端以輕量fabric.js實現(xiàn)示例理解canvas
一文了解JavaScript用Element?Traversal新屬性遍歷子元素
fs-extra實現(xiàn)yarn?create?tlist創(chuàng)建示例詳解

