vue3实现excel文件预览和打印
文章目录
- 一、预览excel
- 1 安装
- 2 使用
- 代码
- 3 效果
- 二、打印excel
- 1 安装
- 2 使用
- vue3全局引入print
- 代码
- 3 效果
- 三、总结
在前端开发中，有时候一些业务场景中，我们有需求要去实现excel的预览和打印功能，本文在vue3中如何实现Excel文件的预览和打印。
一、预览excel
关于实现excel文档在线预览的做法，一种方式是通过讲文档里的数据处理成html，一种是将文档处理成图片进行预览。
首先我们先讲一下实现html这种方式预览的。Excel预览用的是xlsx这个库。
xlsx是一个优秀的表格处理库，是一款适用于浏览器和nodejs的开源电子表格解析库
1 安装
这里值得注意的是，vue2和vue3的引用写法不一样
// vue2 引用 xlsx
import xlsx from 'xlsx'
// vue3 引用 xlsx
import * as XLSX from 'xlsx'
2 使用
「FileReader读取文件流」
先使用FileReader对象提供的一种读取File对象内容的方法，将文件流用readAsBinaryString方法根据二进制字符串的形式返回，再通过reader.onload操作读取文件流的二进制字符串形式：
使用案例
// 实例化 FileReader 对象
co