vue实现导入导出

导入导出常见于管理系统之类的项目,这周也是用到了,分享一下。

一.导入

1. 导入导出都会用到xlsx这个库,直接npm i xlsx即可。

2. 第一步点击导出以后会弹出两个按钮一个是下载导入文件的模版，另一个就是导入文件的按钮。

3. 关于导入最简单的办法采用vue-element-admin项目上面的src/components/UploadExcel/index.vue这个文件就有导入的方法。

4. 导入无非就是一个input标签，类型为file,我们要将他给隐藏掉直接v-show="false"即可,并为其绑定ref属性,点击导入文件的时候调用绑定的ref点击事件,这个时候windows就会让你去选择文件,input会获取到这个文件,在input上面的files属性中可以拿到。

5. 通过将input得到的文件流信息传递给FileReader这个构造函数,FileReader是一个专门用于读取文件流的函数,readAsArrayBuffer让其将文件流读取,最后会去返回二进制数据。results就是最后读取到的文件信息,前端将这个信息进行一定的处理,传递给后端。

const reader = new FileReader()
reader.onload = e => {
  const data = e.target.result
  const file = XLSX.read(data, { type: 'array' })
  const results = XLSX.utils.sheet_to_json(worksheet)
}
reader.readAsArrayBuffer(rawFile)

二.导出

1. 后端会给一个接口,我这里后端返回的是一个文件流。

2. 通过创建iframe这个标签,利用浏览器会将解析不了的文件下载这一特性。

3. 为这个iframe的src属性绑定为后端返回文件流的导出接口。(注意，后端接口必须是get,iframe,a标签这些src属性都是使用的get请求)

4. 将这个iframe添加到页面上,让浏览器解析,这个时候就会打开excel,完成功能。

var iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src="后端地址"
document.body.appendChild(iframe)
setTimeout(()=>{
    iframe.remove()
})