vue导出excel表格

原创已于 2025-02-12 09:12:43 修改 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #excel #javascript

于 2023-07-31 09:01:58 首次发布

使用Vue.js的$http方法进行POST请求，通过设定responseType为blob来处理二进制流数据，生成新的Blob对象。然后创建隐藏的a标签，设置href为创建的ObjectURL，点击a标签触发文件下载，最后移除a标签并释放ObjectURL。对于已存在于public目录下的Excel文件，可以直接创建a标签进行下载。

调用导出
 this.$http({
   method: "POST",
   url: 'user/fileGeneration',
   responseType: "blob", //定义为blob
   data: {},
 }).then((res) => {
   this.dialogVisible = false
   const file = new Blob([res.data]);
   const a = document.createElement("a");
   const fileName = '调研记录列表.xlsx';//下载文件名称
   a.download = fileName
   a.style.display = 'none'
   a.href = URL.createObjectURL(file);
   document.body.appendChild(a);
   a.click();
   URL.revokeObjectURL(a.href);
   document.body.removeChild(a);
 })

截取数据流中的文件名

   let temp = res.headers["content-disposition"].split(";")[1].split("filename=")[1]
   let fileName = decodeURIComponent(temp)
   a.download = fileName

下载本地的excel表格

先把excel放在public下面

this.dialogVisible = false
const a = document.createElement('a');
a.href = '/reponse.xls';
a.download = 'reponse.xls';
console.log(a.href)
a.style.display = 'none';
document.body.appendChild(a);
a.click();
a.remove();