前端下载文件

最新推荐文章于 2024-06-19 10:00:40 发布

syz1203

最新推荐文章于 2024-06-19 10:00:40 发布

阅读量222

点赞数

分类专栏：日常应用文章标签：前端 javascript html

本文链接：https://blog.csdn.net/syz1203/article/details/122980184

版权

日常应用专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、如果后端提供的是地址

直接采用：window.location.href = 后端提供的地址

2、流形式下载文件

this.axios
          .post(
            url地址,
            {
              headers: {
                "Content-Type": "application/json; application/octet-stream",
              },
              responseType: "blob",
            }
          )
          .then((res) => {
            // 此处有个坑。这里用content保存文件流，最初是content=res，但下载的文件里的内容是个对象，
            // 检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
            // 另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
            const content = res.data;
            const blob = new Blob([content]); // 构建一个blob对象来处理数据
            const filename = res.headers["content-disposition"]; // 导出的文件名
            // 对于<a>标签，只有 Firefox 和 Chrome(内核)支持download属性
            // IE10以上支持blob 但是不支持download
            if ("download" in document.createElement("a")) {
              // 支持a标签download的浏览器
              const downloadElement = document.createElement("a");
            //   link.style.display = 'none' // 隐藏a标签
              const href = window.URL.createObjectURL(blob); //创建下载的链接
              downloadElement.href = href;
              [downloadElement.download] = [// a标签添加download属性
                decodeURI(decodeURI(filename.split("=")[1])),
              ];
              document.body.appendChild(downloadElement);
              downloadElement.click(); //点击下载
              document.body.removeChild(downloadElement); //下载完成移除元素
              window.URL.revokeObjectURL(href); //释放url
            } else {
              // 其他浏览器
              navigator.msSaveBlob(blob, filename);
            }
          })
          .catch((error) => {
            console.log(error);
          });
      });