img

Vue中axios实现下载excel表格功能

2020-10-21 0条评论 2.5k次阅读 JavaScript


之前遇到一个问题:就是做下载excel表格功能时,不知道怎么把后端返回的文件流转化成表格,上网看了很多方法,可能自己没有找对吧,确实可以实现下载,但是下载的表格内容是乱码,个人感觉应该是实现下载函数方法写错了,现在实现了,先记录一下,为了方便日后自己的学习。

image.png
上图就是调取后端接口成功后返回的文件流

第一步:先写接口函数(以我的代码为例)

responseType 表示服务器响应的数据类型,可以是 arraybuffer, blob, document,json, text, stream,默认是json

let url = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_apiUrl + '/buyerCenter/extractAccountData' : '/buyerCenter/extractAccountData';
axios({
  method: 'POST',
  url: url,
  withCredentials: true, // 允许携带cookies
  responseType: "arraybuffer", // 重点
  data: p
}).then(res => {
  let filename = "xxx.xlsx";
  this.fileDownload(res.data, filename);
  done();
}).catch(() => {
  this.$message.error('提取xxx报表失败,请检查网络后重试!');
})

第二步:写个下载文件的函数方法

fileDownload(data, fileName) {
  let blob = new Blob([data], {
    type: "application/octet-stream"
  });
  let filename = fileName || "filename.xls";
  if (typeof window.navigator.msSaveBlob !== "undefined") {
    window.navigator.msSaveBlob(blob, filename);
  } else {
    var blobURL = window.URL.createObjectURL(blob);
    var tempLink = document.createElement("a");
    tempLink.style.display = "none";
    tempLink.href = blobURL;
    tempLink.setAttribute("download", filename);
    if (typeof tempLink.download === "undefined") {
      tempLink.setAttribute("target", "_blank");
    }
    document.body.appendChild(tempLink);
    tempLink.click();
    document.body.removeChild(tempLink);
    window.URL.revokeObjectURL(blobURL);
  }
},

这样做就可以实现文件的下载,如果你还没有解决,可以试试!

💬 COMMENT


🦄 支持markdown语法

👋友