vue实现下载后台返回的文件流数据为excel格式文件

后端返回文件流格式数据,直接打印是乱码,我们前端可以使用以下方法将文件流格式的数据下载为excel文件.

1.axios接口部分:（这里是已经封装好了的axios接口）

        如果后端返回的不是Blob类型数据，这里 responseType需要设置返回的响应数据类型

getExcel(data) {
   return request({
      method: 'post',
      url: '/',              //根据实际情况填写
      data: data,
      responseType: 'blob'   //设置返回响应数据的类型
    })
  },

        responseType：设置返回响应数据的类型,需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。

        blob：表示二进制Blob对象

2.调用接口

 async downExcel(data) {
        //调用接口
      const result = await this.$API.getExcel(data);  
      if (result.status === 200) {
        //如果后端返回的result是进过Blob处理的，直接 window.URL.createObjectURL()
        //如果没有,就需要先实例化一个Blob对象,再window.URL.createObjectURL()
        const blob = new Blob([result.data], {
          type: "application/vnd.ms-excel",
        });
        //创建标签
        const link = document.createElement("a");                   
        link.style.display = "none";
        //设置标签href属性为文件路径
        link.href = URL.createObjectURL(blob);  
        //截取文件名                    
        const fileName = decodeURI(
          result.headers["content-disposition"].split("=")[1]       
        );
        //设置下载文件名 
        link.download = fileName                                     
        document.body.appendChild(link);
        //点击触发下载
        link.click();                                               
        this.$message.success("导出成功"); 
        //移除标签      
        document.body.removeChild(link);
        // 释放掉blob对象         
        window.URL.revokeObjectURL(href);                     
      }
    },

        通过以上方法,即可实现

注意:

        完成下载后发现的文件名前后会带上下划线，但是打印文件名又没有问题，例如：_文件名.slsx_

解决：设置下载文件名时添加以下代码即可解决

link.download = fileName.replace(new RegExp('"', "g"), "");