前言因为业务需要，很多文件需要在前端进行预览，今天就来了解一下.Demo地址：https://zhuye1993.github.io/file-view/dist/index.html实现方案在网上找了一个实现方案，效果看起来不错，放在下表中，部分可以通过在vue中直接引入并使用了npm。文档格式老开源组件替换开源组件word(docx)mammothdocx-preview(npm)powerpoint(pptx)pptxjspptxjs改造开发excel(xlsx)sheetjs,handsontableexceljs(npm),handsontable(npm)(npm)pdf(pdf)pdfjspdfjs(npm)imagejquery.verySimpleImageViewerv-viewer(npm)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,//启用环绕文档内容渲染包装器ignoreWidth:boolean=false,//禁用页面渲染宽度ignoreHeight:boolean=false,//禁用页面渲染高度ignoreFonts:boolean=false,//禁用字体renderingbreakPages:boolean=true,//atpagebreakEnablepaginationonignoreLastRenderedPageBreak:boolean=true,//禁用lastRenderedPageBreak元素的分页experimental:boolean=false,//启用实验特性（制表符停止计数）trimXmlDeclaration:boolean=true,//如果为true，则xml声明将在解析之前从xml文档中删除调试：boolean=false,//启用extra日志记录});实现效果：pdf实现前端预览代码实现首先npmipdfjs-dist通过PDFJS.getDocument设置PDFJS.GlobalWorkerOptions.workerSrc处理pdf数据的地址，返回一个对象pdfDoc通过pdfDoc单独获取第一页。getPageData创建一个dom元素，设置元素的canvas属性，通过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");//数据是ArrayBuffer格式，也是缓冲流数据PDFJS.getDocument（数据）。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.oBackingStorePixelRatio||ctx.backingStorePixelRatio||1;常数比=dpr/bsr；constviewport=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(比率,0,0,比率,0,0);constrenderContext={canvasContext:ctx,viewport:viewport,};//数据被渲染到画布page.render(renderContext);})})实现效果：excel实现前端预览代码下载exceljs和handsontable的库。exceljs从文件中读取数据，通过workbook.getWorksheet方法获取每个工作表的数据，处理成数据的二维数组，引入@handsontable/vue的组件HotTable。通过settings属性，将一些配置参数和二维数组数据传入组件，渲染成excel样式，并预览//加载excel数据(newExcelJS.Workbook().xlsx.load(buffer))。然后(workbook=>{//获取excel第一页的数据constws=workbook.getWorksheet(1);//获取每一行的数据Dataconstdata=ws.getRows(1,ws.actualRowCount);})//渲染页面import{HotTable}from"@handsontable/vue";
