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

在我们日常开发中前端下载文件通常分为两种方式，一种为后端返回路径，前端直接拼接路径使用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中是否对响应结果进行的拦截把响应头对象给去掉了，如果去掉则要针对该响应头做出特殊处理。