&

【JavaScript】WEB頁面純JS實(shí)現(xiàn)批量下載文件為壓縮包

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

admin

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

有一個需求，是列表里面有很多圖片或者pdf文件的url，用戶想要一個批量下載，點(diǎn)擊按鈕后，把列表的這些文件全部都下載下來，并且是一個壓縮包，包里面包含那些url對應(yīng)的文件。

  <!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 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財務(wù)費(fèi)用、相關(guān)報表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。