vue后端返回文件流，前端实现Excel文件导出自定义文件名（新）

当后端返回文件流格式前端应该如何处理？
如何将后端返回的文件流格式转换为Excel文件，并下载Excel文件？
带着这些问题看文章，希望对你有所帮助！

1. 应用场景
2. 代码块分析
3. 具体代码实现

1.应用场景

当后端返回的是文件流形式，前端应当如何处理？
如何利用blob方法将文件流转换成正常的Excel文件格式？

2.代码块分析

 downloadFileExcel(res, fileName) {//自定义blob方法，导出Excel文件
        let blob = new Blob([res.data]);
        if (!fileName) {//如果后台返回文件名称
        //注意一定要和后端协调好返回的数据格式，不然会出现中文乱码问题
          fileName = res.headers['content-disposition'].split('filename=').pop();
        }
        if ('msSaveOrOpenBlob' in navigator) {
          window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
          const elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
        }
      },

3.具体代码实现

getlist:function(){
var data={
 username:_this.userName,startTime:_this.startTime,endTime:_this.endTime
}
 _this.$axios.post(_this.httpAPI + 'slog/getExecl',data,{
          headers: {'Content-Type': 'application/json','Authorization': _this.token},
          responseType:"blob"//注意 需要规定后台返回文件流格式
        }
        ).then(function(response){
          if(response){
            _this.downloadFile(response, '卷宗下载'+_this.DQTime+ '.xls');//自定义Excel文件名
          }else{
            _this.$message.error("服务端异常，Excel文件下载失败！");
          }
        });
}
downloadFile(res, fileName) {
        let blob = new Blob([res.data]);
        if (!fileName) {
          fileName = res.headers['content-disposition'].split('filename=').pop();
        }
        if ('msSaveOrOpenBlob' in navigator) {
          window.navigator.msSaveOrOpenBlob(blob, fileName);
        } else {
          const elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
        }
}
      

写在最后

如果看完此篇文章对您有小小的帮助，请点一个关注/收藏支持支持博主。谢谢！