当前位置: 首页 > 科技观察

本文彻底搞懂前端文件预览(word、excel、pdf、ppt、mp4、图片、文本)

时间:2023-03-17 23:54:16 科技观察

前言因为业务需要,很多文件需要在前端进行预览,今天就来了解一下.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";hotSsettings={语言:"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,//关闭外部点击取消选择行为outsideClickDeselects:false,//fillHandle:{//direction:'vertical',//autoInsertRow:true//},//afterSelectionEnd:this.afterSelectionEnd,//bindRowsWithHeaders:'strict',licenseKey:"non-commercial-and-evaluation"}实现效果,pptx的前端预览主要是通过jszip库,加载二进制文件,然后再经过一些列处理Conversion来实现预览效果,实现起来比较麻烦,所以就不贴代码了,有兴趣的可以下载代码查看实现效果。总结主要介绍word、excel、pdf文件预览的实现方式。不会出现一些文字混乱和乱码的问题,所以一般比较好的解决办法是在后端配合下将不同格式的文件转成pdf,然后由前端实现预览效果,这样会保留一些文件的样式效果。对于图片、txt文件的实现,有兴趣的可以看看代码。代码地址https://github.com/zhuye1993/file-view