vue的axios调用后端接口下载文件问题（blob下载二进流）

最新推荐文章于 2025-05-29 22:33:30 发布

我真不是王思聪

最新推荐文章于 2025-05-29 22:33:30 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： blob

本文链接：https://blog.csdn.net/kebi99/article/details/109806643

博主在项目中遇到Excel表数据导出问题，后端返回二进制流格式数据。通过查询资料，前端使用Blob实现了二进制流文件下载到本地。获取数据后，对下载文件名进行处理，经后端告知编码方式，前端用decodeURI()函数解析成功解决问题。

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

今天做了一个需求，，项目的excel表数据的导出，前面我直接调用接口但是却发现后端返回了的数据是二进流格式，如图：

这就纳闷了，后来查询资料就得知了，前端需要用blob就可以二级制流文件下载到了本地了，这里，感谢原来博主分享的资料，让我解决问题，附上连接https://www.cnblogs.com/art-poet/p/13730640.html

后来获取到数据之后，需要对请下载文件名进行定义，我发线获取的文件的一堆什么格式我也不知道，问了后端才知道，对其进行了encodeURI编码，然后我在前端用decodeURI() 函数进行了对应的解析就成功解决了问题

代码如下：希望对其有帮助，引入有错误，多多指教啊

axios({
					method: 'get',
					url: `${window.g.baseURL}/mgmt/manage/team/members/export`,//请求地址
					headers: {
						token: sessionStorage.getItem('accessToken')//token给后端验证，看自己项目
					},
					responseType: 'blob'
				}).then(res => {
					let blob = new Blob([res.data], {
						type: 'application/vnd.ms-excel;charset=utf-8'
					})
					let contentDisposition = res.headers['content-disposition'] //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
					let patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
					let result = patt.exec(contentDisposition)
					let thename = decodeURI(result[1]) //使用decodeURI对名字进行解码
					let downloadElement = document.createElement('a')
					let href = window.URL.createObjectURL(blob) //创建下载的链接
					downloadElement.style.display = 'none'
					downloadElement.href = href
					downloadElement.download = thename //下载后文件名
					document.body.appendChild(downloadElement)
					downloadElement.click() //点击下载
					document.body.removeChild(downloadElement) //下载完成移除元素
					window.URL.revokeObjectURL(href) //释放掉blob对象
				})