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

Posted 2020-12-22 evanc

先上代码：

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 || window.moxURL;
      // 创建下载链接
      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‘ });