前言 因为业务需要，很多文件需要在前端实现预览，今天就来了解一下吧。 可以点击下面地址体验喔 git仓库地址 以及在线demo地址 实现方案 找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。 文档格式老的开源组件替代开源组件word（docx）mammothdocx-preview(npm)powerpoint（pptx）pptxjspptxjs改造开发excel（xlsx）sheetjs、handsontableexceljs(npm)、handsontable(npm)(npm)pdf（pdf）pdfjspdfjs(npm)图片jquery.verySimpleImageViewerv-viewer(npm) docx文件实现前端预览 代码实现 首先npm i docx-preview引入renderAsync方法将blob数据流传入方法中，渲染word文档 实现效果 pdf实现前端预览 代码实现 首先npm i pdfjs-dist设置PDFJS.GlobalWorkerOptions.workerSrc的地址通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc通过pdfDoc.getPage单独获取第1页的数据创建一个dom元素，设置元素的画布属性通过page.render方法，将数据渲染到画布上 实现效果 excel实现前端预览 代码实现 下载exceljs、handsontable的库通过exceljs读取到文件的数据通过workbook.getWorksheet方法获取到每一个工作表的数据，将数据处理成一个二维数组的数据引入@handsontable/vue的组件HotTable通过settings属性，将一些配置参数和二维数组数据传入组件，渲染成excel样式，实现预览 实现效果 pptx的前端预览 主要是通过jszip库，加载二进制文件，再经过一些列处理处理转换实现预览效果，实现起来比较麻烦，就不贴代码了，感兴趣的可以下载代码查看。 实现效果 总结 主要介绍了word、excel、pdf文件实现预览的方式，前端实现预览最好的效果还是PDF，不会出现一些文字错乱和乱码的问题，所以一般好的方案就是后端配合将不同格式的文件转换成pdf，再由前端实现预览效果，将会保留文件的一些样式的效果，对于图片、txt文件的实现，感兴趣的可以看下代码。 前端vue-cropperjs实现图片裁剪方案 参考资料 www.npmjs.com/package/v-v… www.npmjs.com/package/vue… 以上就是js前端实现word excel pdf ppt mp4图片文本等文件预览的详细内容，更多关于js预览mp4图片文本文件的资料请关注脚本之家其它相关文章！