前端实现将文件流下载导出为文件_前端把文件流转化为文件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40775791/article/details/135295929

本文介绍了如何在前端通过axios请求接口获取流文件，利用Blob对象结合a标签或file-saver库实现文件下载，包括创建a标签下载和使用file-saver模块的两种方式，并提及了jszip和xlsx在文件操作中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当遇到后端是将已有的/生成的文件以流的形式写进接口返回给前端这种场景，前端可以通过实例化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)
}