前端 vue 怎么下载后端返回的二进制流 excel 表格文件

需求描述

• 我对表格数据进行勾选，想要把勾选值导出成Excel文件
• 勾选后我将发送请求给后端，后端会返回一个二进制流的数据
• 我接收到返回值后，怎么把它下载成Excel文件呢？

---

一、请求接口处理

	// 大家无需关注该函数,它是处理请求参数的(我这里params是个对象，形如: {export_fields: ["commit"],…})
	const params = this.handleReqParams() 
	// 记得在外侧函数添加 async
	// $http 在 main.js 中是这样的：Vue.prototype.$http = axios
	// res 形如图 1
	const res = await this.$http.post('/api/xx/export_niubi.fes', params, { 
    	responseType: 'arraybuffer' // 表示原始二进制数据缓冲区
	})
	// 生成地址，形如图 2
	const url = window.URL.createObjectURL(new Blob([res], { type: '.xlsx' }))
	// 创建标签a
    let a= document.createElement('a')
    // 设置隐藏
    a.style.display = 'none'
    // 给a标签地址
    a.href = url
    // 设置属性download和值，这是个特殊属性，参照图 3
    a.setAttribute('download', `${this.objId}.xlsx`)
    // 把a标签放入body，创建后的 a 标签，形如图 4
    document.body.appendChild(a)
    // 调用手动点击事件，相当于你做了一次点击
	a.click()
	// 释放该文件引用地址，当你结束使用某个 URL 对象之后，应该调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了(如果该页面有很多文件通过这种方法下载，这一步清理引用对性能优化尤为重要)
	window.URL.revokeObjectURL(url)
	// 移除a标签
	document.body.removeChild(a)

二、步骤图片说明

1.res返回数据

2.url地址

3.download属性

4.a标签

5.返回的原式数据，长这样

---

三、总结

• 到此为止，下载功能已经实现
• 你可以给 download 属性设置不同的值，来给文件取名，通常会加上一个时间函数
• 必须添加responseType: ‘arraybuffer’，不然报错(responseType也可以是blob，可自行尝试)
• new Blob([res], { type: ‘.xlsx’ }) 中的type可以改成其他格式，取决于你要导出的文件类型