1000字范文 > 前端实现word excel pdf ppt mp4 图片文本等文件的预览

前端实现word excel pdf ppt mp4 图片文本等文件的预览

时间：2018-10-16 22:39:45

关注公众号前端开发博客，领27本电子书

回复加群，自助秒进前端群

大家好，我是漫步，明天有个抽奖，记得去参与。张鑫旭最新的CSS书，免费送10本

前言

因为业务需要，很多文件需要在前端实现预览，今天就来了解一下吧。

Demo地址[1]

实现方案前端开发博客

找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。

docx文件实现前端预览

代码实现

首先npm i docx-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,//禁止字体渲染breakPages:boolean=true,//在分页符上启用分页ignoreLastRenderedPageBreak:boolean=true,//禁用lastRenderedPageBreak元素的分页experimental:boolean=false,//启用实验性功能（制表符停止计算）trimXmlDeclaration:boolean=true,//如果为真，xml声明将在解析之前从xml文档中删除debug:boolean=false,//启用额外的日志记录});

实现效果

image.png

pdf实现前端预览

代码实现

首先npm i pdfjs-dist

设置PDFJS.GlobalWorkerOptions.workerSrc的地址

通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc

通过pdfDoc.getPage单独获取第1页的数据

创建一个dom元素，设置元素的画布属性

通过page.render方法，将数据渲染到画布上

import*asPDFJSfrom"pdfjs-dist/legacy/build/pdf";//设置pdf.worker.js文件的引入地址PDFJS.GlobalWorkerOptions.workerSrc=require("pdfjs-dist/legacy/build/pdf.worker.entry.js");//data是一个ArrayBuffer格式，也是一个buffer流的数据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||ctx.oBackingStorePixelRatio||ctx.backingStorePixelRatio||1;constratio=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(ratio,0,0,ratio,0,0);constrenderContext={canvasContext:ctx,viewport:viewport,};//数据渲染到canvas画布上page.render(renderContext);})})

实现效果

image.png

还可以看看：Webview加载pdf遇到的一些坑及解决方法

excel实现前端预览

代码实现

下载exceljs、handsontable的库

通过exceljs读取到文件的数据

通过workbook.getWorksheet方法获取到每一个工作表的数据，将数据处理成一个二维数组的数据

引入@handsontable/vue的组件HotTable

通过settings属性，将一些配置参数和二维数组数据传入组件，渲染成excel样式，实现预览

//加载excel的数据（newExcelJS.Workbook().xlsx.load(buffer)).then(workbook=>{//获取excel的第一页的数据constws=workbook.getWorksheet(1);//获取每一行的数据constdata=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,//关闭外部点击取消选中时间的行为outsideClickDeselects:false,//fillHandle:{//direction:'vertical',//autoInsertRow:true//},//afterSelectionEnd:this.afterSelectionEnd,//bindRowsWithHeaders:'strict',licenseKey:"non-commercial-and-evaluation"}