前端实现 word、excel、pdf、ppt、mp4、图片、文本等文件的预览
前言
因为业务需要,很多文件需要在前端实现预览,今天就是了解一下吧。
实现方案
找了网上的实现方案,效果看起来不错,放在下面的表格里,里面有一些是可以直接通过 npm 在 vue 中引入使用。
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 库,加载 blob 文件流,再经过一些列处理处理转换实现预览效果
实现效果
总结
主要介绍了 word、excel、pdf 文件实现预览的方式,前端实现预览最好的效果还是 PDF,不会出现一些文字错乱和乱码的问题,所以一般好的方案就是后端配合将不同格式的文件转换成 pdf,再由前端实现预览效果,将会保留文件的一些样式的效果,对于图片、txt 文件的实现,感兴趣的可以看下代码。
最后
如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163 相互学习,我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点 star:http://github.crmeb.net/u/defu不胜感激 !
PHP 学习手册:https://doc.crmeb.com
技术交流论坛:https://q.crmeb.com
评论