前端实现下载（单个下载+批量下载）

可爱多了没！

已于 2023-02-14 17:43:00 修改

阅读量829

点赞数

文章标签： javascript 前端

于 2023-02-14 17:16:53 首次发布

本文链接：https://blog.csdn.net/weixin_47319129/article/details/129030279

版权

文章介绍了在无法限制后端返回文档数量的情况下，如何通过JavaScript的Blob对象和XMLHttpRequest来解决批量下载问题。通过创建隐藏的a标签，利用download属性和URL.createObjectURL方法，实现了多个文档的逐个下载，同时处理了不支持HTML5download属性的浏览器兼容性问题。

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

最近有个需求是要实现下载文档，但是后端返回需要下载的文档个数又不能做限制，所以最初想要用a标签简单的实现下载就不能生效了，因为会默认下载多个下载链接的最后一个，后面换了个办法用blob对象实现

直接上代码

单个下载：

用a标签实现，调用download属性，具体自己去百度..

批量下载：

    getBlob(url) {
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };
        xhr.send();
      });
    },

    async download(url, filename) {
      const res = await this.getBlob(url);
      const downUrl = res ? URL.createObjectURL(res) : "javascript:void(0);";
      // 创建隐藏的可下载链接
      let eleLink = document.createElement("a");
      eleLink.style.display = "none";
      eleLink.download = filename;
      // 兼容：某些浏览器不支持HTML5的download属性
      if (typeof eleLink.download === "undefined") {
        eleLink.setAttribute("target", "_blank");
      }
      eleLink.href = downUrl;
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      setTimeout(() => {
        document.body.removeChild(eleLink);
      }, 20);
    },