前端接收后端文件流导出excel文档遇到的问题

先上代码:

Vue.prototype.download = function(oUrl, filename) {
  this.axios
    .get(oUrl, { responseType: 'arraybuffer' })
    .then((res) => {
      console.log(res);
      // type 为需要导出的文件类型,此处为xls表格类型
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
      // 兼容不同浏览器的URL对象
      const url = window.URL || window.webkitURL;
      // 创建下载链接
      const downloadHref = url.createObjectURL(blob);
      // 创建a标签并为其添加属性
      let downloadLink = document.createElement('a');
      downloadLink.target = '_blank';
      downloadLink.href = downloadHref;
      filename = filename ? filename : new Date().getTime();
      downloadLink.download = filename + '.xls';
      // 触发点击事件执行下载
      downloadLink.click();
    })
    .catch((err) => {
      console.error(err);
    });
  // window.open(location.origin + axios.defaults.baseURL + oUrl); //直接跳转文件地址下载,有些页面无法正常下载,暂未解决,待排查。
};

请求一定要设置

responseType: 'arraybuffer'

createObjectURL(blob)中的地址一定要是Blob对象:

const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
posted @ 2020-05-27 14:34  玉折兰摧  阅读(4120)  评论(1编辑  收藏  举报