导入导出常见于管理系统之类的项目,这周也是用到了,分享一下。
一.导入
导入导出都会用到xlsx这个库,直接npm i xlsx即可。
第一步点击导出以后会弹出两个按钮一个是下载导入文件的模版,另一个就是导入文件的按钮。
关于导入最简单的办法采用vue-element-admin项目上面的src/components/UploadExcel/index.vue这个文件就有导入的方法。
导入无非就是一个input标签,类型为file,我们要将他给隐藏掉直接v-show="false"即可,并为其绑定ref属性,点击导入文件的时候调用绑定的ref点击事件,这个时候windows就会让你去选择文件,input会获取到这个文件,在input上面的files属性中可以拿到。
通过将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)
二.导出
后端会给一个接口,我这里后端返回的是一个文件流。
通过创建iframe这个标签,利用浏览器会将解析不了的文件下载这一特性。
为这个iframe的src属性绑定为后端返回文件流的导出接口。(注意,后端接口必须是get,iframe,a标签这些src属性都是使用的get请求)
将这个iframe添加到页面上,让浏览器解析,这个时候就会打开excel,完成功能。
var iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src="后端地址"
document.body.appendChild(iframe)
setTimeout(()=>{
iframe.remove()
})