本文摘抄自:
- 《一文彻底搞懂前端实现文件预览(word、excel、pdf、ppt、mp4、图片、文本)》
juejin.cn/post/707159…
原作者姓名:竹业 zhuye1993 github.com/zhuye1993/f…
docx 实现前端预览
npm i docx-preview
pptx的前端预览
主要是通过jszip库,加载二进制文件,再经过若干处理转换实现预览效果。 (实现起来比较麻烦,就不贴代码了,感兴趣的可以下载代码 ^1 查看。)
excel实现前端预览
- 下载exceljs、handsontable的库
- 通过exceljs读取到文件的数据
- 通过workbook.getWorksheet方法获取到每一个工作表的数据,将数据处理成一个二维数组的数据
- 引入@handsontable/vue的组件HotTable
- 通过settings属性,将一些配置参数和二维数组数据传入组件,渲染成excel样式,实现预览