vue前端下载文件的几种方式
前端经常需要通过后端给的文件流下载各种文件,比如excel,word,压缩包等方式一:使用 window.location.href这里限于使用get方式window.location.href = "/ccy/expenses/v1/downloadAttachment/" + id + "?SAAS-Token=" + this.upTokenCd;方式二:如果后端直接给出了文件在...
·
前端经常需要通过后端给的文件流下载各种文件,比如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类型
文章所写内容纯属个人实际开发过程中的整理,还有很多需要补充的地方,欢迎大家提出自己的见解
更多推荐
已为社区贡献6条内容
所有评论(0)