前端实现将文件流下载导出为文件

当遇到后端是将已有的/生成的文件以流的形式写进接口返回给前端这种场景，前端可以通过实例化Blob对象处理流文件实现下载文件功能，有以下两种方式。

---

1.创建a标签方式

代码如下（示例）：

async handleDownload() {
	const res = await axios.post('xxxurl', {
		responseType: 'blob' // 设置接口响应类型
	}) // 调用导出文件的接口
	const blob = new Blob([res], {
		type: 'application/octet-stream' // 通用文件流类型
	})
	const fileName = '测试.xlsx'
	if (navigator.msSaveOrOpenBlob) {
		// IE | Edge
		navigator.msSaveOrOpenBlob(blob, fileName)
	} else {
		const link = document.createElement('a')
		const url = URL || window.webkitURL
		const href = url.createObjectURL(blob)
		link.style.display = 'none'
		link.href = href
		link.download = fileName
		document.body.appendChild(link)
		link.click()
		document.body.removeChild(link)
		url.revokeObjectURL(href)
	}
}

2.使用 file-saver方式

代码如下（示例）：

import FileSaver from 'file-saver'

async handleDownload() {
	const res = await axios.post('xxxurl', {
		responseType: 'blob' // 设置接口响应类型
	}) // 调用导出文件的接口
	const blob = new Blob([res], {
		type: 'application/octet-stream' // 通用文件流类型
	})
	const fileName = '测试.xlsx'
	FileSaver.saveAs(blob, fileName)
}

---

更多了解：

前端jszip生成下载zip文件
前端xlsx导出数据下载文件