【JavaScript】WEB頁(yè)面純JS實(shí)現(xiàn)批量下載文件為壓縮包
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
有一個(gè)需求，是列表里面有很多圖片或者pdf文件的url，用戶想要一個(gè)批量下載，點(diǎn)擊按鈕后，把列表的這些文件全部都下載下來，并且是一個(gè)壓縮包，包里面包含那些url對(duì)應(yīng)的文件。 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 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
