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

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

作者: 木子方是个小太阳 | 来源:发表于2019-09-30 10:14 被阅读0次
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等格式的导出下载

      本文链接:https://www.haomeiwen.com/subject/etecpctx.html