首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

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

Sonder
2020-10-21
1526字
4分钟
浏览 (3.1k)

之前遇到一个问题:就是做下载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);
  }
},

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

下一篇 / webpack优化打包大全

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)