js实现web端批量下载

压码路

已于 2022-05-02 15:49:35 修改

阅读量1.4k

点赞数 2

分类专栏：前端文章标签： javascript html5

于 2021-03-22 15:33:09 首次发布

本文链接：https://blog.csdn.net/keyiis_sh/article/details/115081080

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用场景：比如一个展现pdf文档列表的网页内需要允许客户自己勾选(可多选)需要打包下载的内容，最终以zip文件的形式在浏览器下载

此功能也可在服务端实现，但是在web端实现可以降低服务器负载，提升客户体验。

下面是代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> -->
</head>

<body>
  <script>
    async function batch(){
      var zip = new JSZip();
      // 需要下载的文件链接数组，替换成你要下载的内容
      let files=["https://abc.com/1.pdf","https://abc.com/2.pdf"];
      // 遍历下载文件并放入zip
      for(let file of files){
        // 使用浏览器自带的XMLHttpRequest
        let data = await download(file);
        // 使用axios
        // let res = await axios.get(file,{responseType: 'blob'});
        zip.file(file.substring(file.lastIndexOf('/')),data);
      }
      // 生成zip文件
      let content = await zip.generateAsync({ type: "blob" });
      // 触发浏览器下载
      saveAs(content, "example.zip");
    }
    // 使用XMLHttpRequest实现，也可使用axios取代该方法
    function download(url) {
      return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET",url,true);
        xhr.responseType = "blob";
        xhr.onload = () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(xhr.response);
          } else {
            reject(xhr.statusText);
          }
        };
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send();
      });
    }
    // 自动运行下载
    batch().then(()=>{}).catch(console.log)
  </script>
</body>
</html>