前端处理后端返回流文件.xlsx,.zip等格式的导出下载

function handelExport(response,type){
  let fileName = decodeURI(response['headers']['content-disposition'].split('filename = ')[1]); //不同情况对应取值不同处理可能不同,以实际情况处理
  let blob = new Blob([response.data], {
    type: type+';charset=utf-8'
  });
  let src = window.URL.createObjectURL(blob);
  if(src){
    let a = document.createElement('a');
    a.setAttribute('href', src);
    a.setAttribute('download', fileName);
    let evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
    a.dispatchEvent(evObj);
  }
}

type格式可选择可以参考我另外一篇文章【office文件所对应的的 Content-type类型Content-type类型总结】(https://www.jianshu.com/p/4b09c260f9b2
)

需要注意的点

1:有时候fileName后台返回或者前端写死的,如果只是单纯的文件名不加文件后缀,这个时候在IE浏览器下下载的文件可能不能识别,这个时候可以在fileName上加上后缀(eg:.zip)即可以解决IE下下载文件格式错误问题。
2:如果后端返回的是byte流,在请求接口时,请求头要加上responseType: 'blob'.

this.$axios.post('/api/xxx', params, {
  responseType: 'blob'
}).then((res) => {
  if (res.data.size) {
    this.handelExport(res,'application/zip');
  } else {
    this.$message.error(res.data.message || '导出excel失败,请稍后再试');
  }
}).catch((err) => {
  this.$message.error(err.message || '导出excel失败,请稍后再试');
});

你可能感兴趣的:(前端处理后端返回流文件.xlsx,.zip等格式的导出下载)