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

2024年5月13日 1,311次阅读 来源: 道雄

前端经常需要通过后端给的文件流下载各种文件，比如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类型

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

    原文作者：道雄
    原文地址: https://blog.csdn.net/qq_36836277/article/details/105572805
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞