一文彻底搞懂前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）.pdfVIP

站长统计 ⼀⼀⽂⽂彻彻底底搞搞懂懂前前端端实实现现⽂⽂件件预预览览 （（wwoorrdd、、eexxcceell、、ppddff 、、pppptt 、、 mmpp 、、图图⽚⽚、、⽂⽂本本）） image.png ddooccxx⽂⽂件件实实现现前前端端预预览览 代代码码实实现现 ⾸⾸先先nnppmm ii ddooccxx-- pprreevv iieeww 引引⼊⼊rreennddeerrAA ssyy nncc⽅⽅法法 将将bblloobb数数据据流流传传⼊⼊⽅⽅法法 中中，，渲渲染染wwoorrdd⽂⽂档档 import { defaultOptions, renderAsync } from docx-preview; renderAsync(buffer, document. etElementById(container), null, options: { className : strin = docx, // 默认和⽂档样式类的类名/前缀 inWrapper: boolean = true, // 启⽤围绕⽂档内容渲染包装器 i noreWidth: boolean = false, // 禁⽌页⾯渲染宽度 i noreHei ht: boolean = false, // 禁⽌页⾯渲染⾼度 i noreFonts: boolean = false, // 禁⽌字体渲染 breakPa es: boolean = true, // 在分页符上启⽤分页 i noreLastRendered Pa eBreak: boolean = true,//禁⽤lastRendered Pa eBreak元素的分页 experimental: boolean = false, //启⽤实验性功能 （制表符停⽌计算） trimXmlDeclaration: boolean = true, //如果为真，xml声明将在解析之前从xml⽂档中删除 debu : boolean = false, // 启⽤额外的⽇志记录 } ); ppddff实实现现前前端端预预览览 代代码码实实现现 -⾸先npm i pdfj s-dist -设置PDFJS.GlobalWorkerOptions.workerSrc的地址 -通过PDFJS.getDocument处理pdf数据，返回⼀个对象pdfDoc -通过pdfDoc.getPage单独获取第 1页的数据 -创建⼀个dom元素，设置元素的画布属性 -通过page.render⽅法，将数据渲染到画布上 import * as PDFJS from pdfjs-dist/le acy/build/pdf; // 设置pdf.worker.js⽂件的引⼊地址 PDFJS.GlobalWorkerOptions.workerSrc = require(pdfjs-dist/le acy/build/pdf.worker.entry.js); // data是⼀个ArrayBuffer格式，也是⼀个buffer流的数据 PDFJS. etDocument(data).promise.then(pdfDoc={ const numPa es = pdfDoc.numPa es; // pdf的总页数 // 获取第1页的数据 pdfDoc. etPa e(1).then(pa e ={ // 设置canvas相关的属性