,,

【JavaScript】WEB頁面純JS實現批量下載文件為壓縮包

admin

2023年8月24日 21:44 本文熱度 1321

有一個需求，是列表里面有很多圖片或者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/[email protected]']; // 這里可以替換為自己的邏輯，比如從哪里獲取之類的

      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協同辦公管理系統。

公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

【JavaScript】WEB頁面純JS實現批量下載文件為壓縮包