摘抄: 一文彻底搞懂前端实现文件预览(word excel...

934 阅读1分钟

本文摘抄自:

image.png

docx 实现前端预览

npm i docx-preview

pptx的前端预览

主要是通过jszip库,加载二进制文件,再经过若干处理转换实现预览效果。 (实现起来比较麻烦,就不贴代码了,感兴趣的可以下载代码 ^1 查看。)

代码^1

excel实现前端预览

  • 下载exceljs、handsontable的库
  • 通过exceljs读取到文件的数据
  • 通过workbook.getWorksheet方法获取到每一个工作表的数据,将数据处理成一个二维数组的数据
  • 引入@handsontable/vue的组件HotTable
  • 通过settings属性,将一些配置参数和二维数组数据传入组件,渲染成excel样式,实现预览