【JavaScript】WEB页面纯JS实现批量下载文件为压缩包

admin

2023年8月24日 21:44 本文热度 471

有一个需求，是列表里面有很多图片或者pdf文件的url，用户想要一个批量下载，点击按钮后，把列表的这些文件全部都下载下来，并且是一个压缩包，包里面包含那些url对应的文件。

  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>doc</title>
  </head>
  <body>
   <button onclick='packageImages()'>批量下载</button>
   
<!-- 下面是需要用到的js -->
<script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.staticfile.org/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdn.staticfile.org/axios/1.2.0/axios.min.js"></script>

<script>
   function packageImages() {
      var imgsSrc = ['https://img-home.csdnimg.cn/images/20201124032511.png', 'https://csdnimg.cn/medal/qixiebiaobing4@240.png']; // 这里可以替换为自己的逻辑，比如从哪里获取之类的

      var promises =[]
      const zip = new JSZip();
      for(let item of imgsSrc){
          let axios = getFile(item).then(({data})=>{
             let fileName = getFileName(item) //文件名
             zip.file(fileName, data, {binary: true});
          })
          promises.push(axios)
      }

      Promise.all(promises).then(() => {
          if (Object.keys(zip.files).length > 0) {
             zip.generateAsync({type: 'blob'}).then((blob) => {
                 saveAs(blob, 'files.zip');
                 console.log('批量下载成功')
             });
          } else {
             console.log('下载全部失败')
          }
      });
     }
     
     function getFileName(filePath){
      var startIndex = filePath.lastIndexOf("/");
      if(startIndex != -1)
          return filePath.substring(startIndex+1, filePath.length).toLowerCase();
      else return "";
     }

     function getFile(url){
      return new Promise((resolve, reject) => {
                 axios({
                    url,
                    method: 'GET',
                    responseType: 'blob',
                 })
                 .then((data) => {
                    resolve(data);
                 })
                 .catch((err) => {
                    reject(err.toString());
                 });
      });
     }
</script>
</body>
</html>

该文章在 2023/8/24 21:47:05 编辑过

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。