前端经常需要通过后端给的文件流下载各种文件，比如excel，word，压缩包等

最新推荐文章于 2024-10-14 17:30:31 发布

New_leng

最新推荐文章于 2024-10-14 17:30:31 发布

阅读量1.6k

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/New_leng/article/details/123920298

版权

本文介绍了前端如何处理后端提供的文件流进行下载，包括通过window.location.href、a标签和利用Blob对象的三种方式，适用于Excel、Word、压缩包等多种文件类型。

摘要由CSDN通过智能技术生成

方式一：使用 window.location.href

这里限于使用get方式

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

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

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

方式三：使用blob类型

download(id, name) {
  this.$confirm(`是否确认下载${name}文件?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      this.axios({
        method: "GET", // 如果是get方法，则写“GET”
        url: `/download?id=${id}`,
        responseType: "blob",
      }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/zip", //这里需要根据不同的文件格式写不同的参数
        });

        let eLink = document.createElement("a");