狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

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

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

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

1.  <!doctype html>

2.  <html lang="en">

3.  <head>

4.  <meta charset="UTF-8">

5.  <title>doc</title>

6.  </head>

7.  <body>

8.   <button onclick='packageImages()'>批量下載</button>

9.   

10.<!-- 下面是需要用到的js -->

11.<script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>

12.<script src="https://cdn.staticfile.org/jszip/3.10.1/jszip.min.js"></script>

13.<script src="https://cdn.staticfile.org/FileSaver.js/2.0.5/FileSaver.min.js"></script>

14.<script src="https://cdn.staticfile.org/axios/1.2.0/axios.min.js"></script>

15.

16.<script>

17.   function packageImages() {

18.      var imgsSrc = ['https://img-home.csdnimg.cn/images/20201124032511.png', 'https://csdnimg.cn/medal/qixiebiaobing4@240.png']; // 這里可以替換為自己的邏輯,比如從哪里獲取之類的

19.

20.      var promises =[]

21.      const zip = new JSZip();

22.      for(let item of imgsSrc){

23.          let axios = getFile(item).then(({data})=>{

24.             let fileName = getFileName(item) //文件名

25.             zip.file(fileName, data, {binary: true});

26.          })

27.          promises.push(axios)

28.      }

29.

30.      Promise.all(promises).then(() => {

31.          if (Object.keys(zip.files).length > 0) {

32.             zip.generateAsync({type: 'blob'}).then((blob) => {

33.                 saveAs(blob, 'files.zip');

34.                 console.log('批量下載成功')

35.             });

36.          } else {

37.             console.log('下載全部失敗')

38.          }

39.      });

40.     }

41.    

42.     function getFileName(filePath){

43.      var startIndex = filePath.lastIndexOf("/");

44.      if(startIndex != -1)

45.          return filePath.substring(startIndex+1, filePath.length).toLowerCase();

46.      else return "";

47.     }

48.

49.     function getFile(url){

50.      return new Promise((resolve, reject) => {

51.                 axios({

52.                    url,

53.                    method: 'GET',

54.                    responseType: 'blob',

55.                 })

56.                 .then((data) => {

57.                    resolve(data);

58.                 })

59.                 .catch((err) => {

60.                    reject(err.toString());

61.                 });

62.      });

63.     }

64.</script>

65.</body>

66.</html>


該文章在 2023/8/24 21:47:05 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved