后端返回文件流前端(Vue)如何处理

ConstMao

已于 2024-04-13 15:43:34 修改

阅读量1.7k

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript

于 2024-03-04 16:55:40 首次发布

本文链接：https://blog.csdn.net/qq_45209073/article/details/136456198

日常前端开发中，下载文件有后端返回路径和返回流文件两种方式。本文主要分享后端返回流文件时前端的处理方法，请求流文件可能是post或get请求，post请求需在axios中设置响应类型为blob，还提到处理文件名及响应头的注意事项。

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

在我们日常开发中前端下载文件通常分为两种方式，一种为后端返回路径，前端直接拼接路径使用window.location.href下载。另一种是后端以流文件的方式返回给我们下载文件，今天主要分享当后端返回流文件时，前端如何处理。

首先，请求流文件的方法一般是post请求，但是也有是get请求，看和后端的约定，当为post请求时，我们在封装的axios请求方法中要设置请求响应类型为blob，为get请求时则不用设置，代码如下：

export function exportData(data) {
  return request({
    url: "/download/exportdataexcel",
    method: "post",
    responseType: "blob",
    data
  });
}

对流文件的处理代码：

exporSiteFile(fileId) {
			let params = {
				ProjectID: this.ProjectID,
				PCTime: new Date().getTime(),
				RequestType: "File",
				Condition: {
					Action: "SiteParamFile",
					Config: {
						FileID: fileId
					}
				}
			};
			exportData(params).then(res => {
				if (res.data.size > 0) {
					const blob = new Blob([res.data]);
					let url = window.URL.createObjectURL(blob); //根据返回的流文件创建url；url指向流
					let link = document.createElement("a");
					link.style.display = "none";
					link.href = url;
					let fileName = decodeURIComponent(res.headers["filename"]);
					link.setAttribute("download", fileName); // 自定义下载文件名（如exemple.txt）
					document.body.appendChild(link); //添加不可见a标签
					link.click(); //代码触发a标签的点击事件进行文件下载
				}
			});
		}

注：我这里使用的文件名为后端通过设置响应头返回对应文件名，当然也可以自定义文件名，当使用响应头获取文件名时要注意在封装的request.js中是否对响应结果进行的拦截把响应头对象给去掉了，如果去掉则要针对该响应头做出特殊处理。