js实现web端批量下载_web下载次数怎么实现

作者：繁依Fanyi0 | 2024-04-09 15:55:27

踩

web下载次数怎么实现

使用场景：比如一个展现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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/393793