前言由于业务需要，很多文件需要在前端进行预览。实施方案在网上找了一个实施方案，效果看起来不错。放在下表中，其中一些可以直接通过npm在vue中引入使用。docx文件实现前端预览代码实现先npmidocx-preview引入renderAsync方法将blob数据流传入方法，渲染word文档import{defaultOptions,renderAsync}from"docx-preview";renderAsync(buffer,document.getElementById("container"),null,options:{className:string="docx",//默认和文档样式类的类名/前缀inWrapper:boolean=true,//启用文档周围的包装渲染contentignoreWidth:boolean=false,//禁止页面渲染宽度ignoreHeight:boolean=false,//禁止页面渲染高度ignoreFonts:boolean=false,//禁止字体渲染breakPages:boolean=true,//分页时启用分页ignoreLastRenderedPageBreak:boolean=true,//禁用lastRenderedPageBreak元素的分页experimental:boolean=false,//启用实验性功能（tab停止计数）trimXmlDeclaration:boolean=true,//如果为true，则将从xml中删除xml声明解析调试前的文档：boolean=false,//启用额外的日志记录});复制代码实现效果pdf实现前端预览代码实现首先npmipdfjs-dist设置PDFJS.GlobalWorkerOptions.workerSrc的地址通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc通过pdfDoc.getPage单独获取数据第一个页面创建一个dom元素，并通过page.render设置元素的canvas属性import*asPDFJSfrom"pdfjs-dist/legacy/build/pdf";//设置pdf.worker.js文件的导入地址PDFJS.GlobalWorkerOptions.workerSrc=require("pdfjs-dist/legacy/build/pdf.worker.entry.js");//data是ArrayBuffer格式，也是缓冲流数据PDFJS.getDocument(data).promise.then(pdfDoc=>{constnumPages=pdfDoc.numPages;//pdf总页数//获取第1页的数据pdfDoc.getPage(1).then(page=>{//设置canvas相关属性constcanvas=document.getElementById("the_canvas");constctx=canvas.getContext("2d");constdpr=window.devicePixelRatio||1;constbsr=ctx.webkitBackingStorePixelRatio||ctx.mozBackingStorePixelRatio||ctx.msBackingStorePixelRatio||ratio=dpr/bsr;constviewport=page.getViewport({scale:1});画布.width=viewport.width*ratio;canvas.height=viewport.height*rat哦；canvas.style.width=viewport.width+"px";canvas.style.height=viewport.height+"px";ctx.setTransform(比率,0,0,比率,0,0);constrenderContext={canvasContext:ctx,viewport:viewport,};//数据渲染到画布page.render(renderContext);})})复制代码实现效果excel实现前端预览代码实现下载exceljs，handsontable库通过exceljs读取数据到文件，通过workbook.getWorksheet方法获取每个工作表的数据，并将数据处理成二维数组。通过settings属性将数据引入@handsontable/vue组件HotTable，传递一些配置参数和二维数组数据。进入组件，渲染成excel样式，实现预览//加载excel的数据(newExcelJS.Workbook().xlsx.load(buffer)).then(workbook=>{//获取excel的数据excel第一页constws=workbook.getWorksheet(1);//获取每一行的数据constdata=ws.getRows(1,ws.actualRowCount);})//渲染页面import{HotTable}from"@handsontable/vue";
