vue前端下载文件的几种方式

您所在的位置：网站首页 › 前端下载文件的方式 › vue前端下载文件的几种方式

vue前端下载文件的几种方式

#vue前端下载文件的几种方式| 来源: 网络整理| 查看: 265

前端经常需要通过后端给的文件流下载各种文件，比如excel，word，压缩包等方式一：使用 window.location.href 这里限于使用get方式

window.location.href = "/ccy/expenses/v1/downloadAttachment/" + id + "?SAAS-Token=" + this.upTokenCd;

方式二：如果后端直接给出了文件在服务器中的地址，可以直接使用a标签或window.open

window.open（“文件在服务器中的地址”）

方式三：使用blob类型

axios({ method: "POST", // 如果是get方法，则写“GET” url: "/api/bPropertyDataImport/exportBatch", responseType: "blob" }) .then(res => { let blob = new Blob([res.data], { type: "application/zip" //这里需要根据不同的文件格式写不同的参数 }); let eLink = document.createElement("a"); eLink.download = "报表数据.zip"; //这里需要自己给下载的文件命名 eLink.style.display = "none"; eLink.href = URL.createObjectURL(blob); document.body.appendChild(eLink); eLink.click(); URL.revokeObjectURL(eLink.href); document.body.removeChild(eLink); }) .catch(err => {});

可以用上面统一的方式进行下载，只不过更改的参数不同对于“type: “application/zip” 表示自己需要下载的数据类型如果是excel，则是 type: “application/vnd.ms-excel” 如果是word，则是 type: “application/msword” 这里的type后面表示的是 MIME 类型，更多文件的MIME类型，可参考下方链接 MIME类型

文章所写内容纯属个人实际开发过程中的整理，还有很多需要补充的地方，欢迎大家提出自己的见解

【本文地址】

vue前端下载文件的几种方式

vue前端下载文件的几种方式

今日新闻

推荐新闻