vue项目实现文件下载

最新推荐文章于 2024-08-20 18:30:57 发布

一叶茶

最新推荐文章于 2024-08-20 18:30:57 发布

阅读量600

点赞数

分类专栏：前端 vue 文章标签： ajax blob

本文链接：https://blog.csdn.net/z_joker_j/article/details/106574236

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

一、如果下载接口不需要token，可使用a标签，直接下载。

二、

如图所示，最后解决

 1 getDownload(urls, fileName) {
 2             var url = urls;
 3             var xhr = new XMLHttpRequest();
 4             xhr.open("get", url, true);
 5             xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 6             xhr.setRequestHeader("access-token", store.state.token.token);
 7             xhr.send();
 8             xhr.responseType = "blob"; // 返回类型blob
 9             xhr.onload = function() {
10                 if (this.status === 200) {
11                     let a = document.createElement("a");
12                     let blob = new Blob([this.response], {
13                         type: "text/csv;charset=GBK;"
14                     });
15                     let objectUrl = URL.createObjectURL(blob);
16                     a.setAttribute("href", objectUrl);
17                     a.setAttribute("download", fileName + ".csv");
18                     a.click();
19                 } else {
20                     alert("出现了未知的错误!");
21                 }
22             };
23         },