Vue中excel文档的导入导出

Vue中excel文档的导入导出

这种需要在开发中也是及其常见，人员的录入上传之类的都会用到

一、excel文档的导出
先讲讲导出哈，导出比较简单~
导出要做三件事

1. 封装api的时候需要声明一下格式
2. 改造一下相应拦截器
3. 下包

导出员工接口返回的是二进制流

responseType: 'blob' // 使用blob接收二进制文件流

axios配置responseType为blob接收二进制流文件为Blob格式

 // 判断是不是Blob
  if (response.data instanceof Blob) return response.data // 返回了Blob对象

安装file-saver包，实现下载Blob文件 yarn add file-saver

npm i file-saver

点击按钮调用接口就是啦，有个方法要注意一下哈~
FileSaver.saveAs是在客户端保存文件的解决方案，非常适合在客户端上生成文件的 Web 应用

      //导入
      import FileSaver from 'file-saver'
      const result = await exportEmployee() // 导出所有的员工接口
      FileSaver.saveAs(result, '员工信息表.xlsx') // 下载文件

二、excel文档的导入

1. new FormData()
2. 调用append方法

('file', files[0]) // 将文件参数加入到formData中

注意：这里有个小问题–不论成功或者失败，再点击上传都会去选择一个新的excel，所以选择在finally里面将内容清空，因为不管成功或者失败，都会走到finally，在finally里面对数据进行清空，别影响下一次操作