Preface
When operating a file stream, the first thing that comes to mind is new FileReader(), this time it involves a Blob object, which is a file object similar to the original data. The FileReader object operates on the Blob object.
Obtain the file from the interface and download it
There are two things that can be achieved. The left is more correct. When axios requests it, you must specify that the returned type is a blob type, and there is no need to new an object. We use FileReader to process res, get a base64 string, and assign it to the a tag to download it.
(Of course, if it is a fast interface with almost no parameters. You can directly 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('导出成功')
})
Pure front-end implementation export
Only need the backend to provide ordinary, commonly used JSon. Click the link below for the content.
a=[
{
name:'张三',age:22}，
{
name:'小王吧',age:‘40’}
]