前言
操作文件流,第一个想到肯定是new FileReader(),这次涉及到一个Blob对象,它是原始数据的类似文件对象。FileReader对象操作的就是Blob对象。
从接口获取文件,并下载
这里有两种都能实现,左边是更正确的,axios请求的时候就要指定返回的类型是blob类型,是不需要再new一个对象。我们用FileReader处理res,得到一个base64字符串,赋给a标签来实现下载。
(当然如果是几乎不带参数、速度很快的接口。可以直接window.open(url) )
axios({
method: 'get',
url: DOMAIN + '/studentRenewFeeQuery/renewedExport',
params: opt,
withCredentials: true,
// responseType: 'blob'
// Blob 对象表示一个不可变、原始数据的类文件对象(File 接口都是基于Blob)
}).then(res => {
// FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
const fileReader = new FileReader()
// 开始读取指定的Blob中的内容。
//读取完成result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
fileReader.readAsDataURL(res.data)
// 处理load事件,该事件在读取操作完成时触发
fileReader.onload = (event) => {
let a = document.createElement('a')
a.download = `sss.xls` //下载后文件名
a.href = event.target.result
document.body.appendChild(a) //插入a标签
a.click()
document.body.removeChild(a) //移除a标签
}
this.$message.success('导出成功')
})
纯前端实现导出
只需要后端提供普通的、常用JSon。内容点下面链接吧。
a=[
{name:'张三',age:22},
{name:'小王吧',age:‘40’}
]