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

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

Logo

前往低代码交流专区

更多推荐