js实现批量下载文件
生活随笔
收集整理的這篇文章主要介紹了
js实现批量下载文件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現數據列表各自詳情批量下載：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>批量下載</title> </head> <body><button class="hula">批量下載</button><a href="http://localtest.com/img/01.jpg" target="_blank" download="01.jpg" class="muldown">down1</a><a href="http://localtest.com/img/02.jpg" target="_blank" download="02.jpg" class="muldown">down2</a><a href="http://localtest.com/img/03.jpg" target="_blank" download="03.jpg" class="muldown">down3</a> </body> </html> <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> <script type="text/javascript">$(function(){$('.hula').click(function(){//方法一：/*let downbtns = $('.muldown');for (let x in downbtns) {//可以選擇使用setTimeout,定時批量觸發下載$(downbtns[x])[0].click();}*///方法二：適用接口ajax請求批量下載let downHrefs = ["http://localtest.com/img/01.jpg", "http://localtest.com/img/02.jpg","http://localtest.com/img/03.jpg"];for(let i=0; i< downHrefs.length; i++){// window.open(downHrefs[i]);//能直接訪問下載的地址，可以使用window.open()var currUrl = downHrefs[i].split("/");var tarName = currUrl[currUrl.length - 1];console.log(tarName);downloadIamge(downHrefs[i], tarName);}});})function downloadIamge(imgsrc, name) {//下載圖片地址和圖片名var image = new Image();// 解決跨域 Canvas 污染問題image.setAttribute('crossOrigin', 'anonymous');image.onload = function () {var canvas = document.createElement('canvas');canvas.width = image.width;canvas.height = image.height;var context = canvas.getContext('2d');context.drawImage(image, 0, 0, image.width, image.height);var _dataURL = canvas.toDataURL('image/png'); //得到圖片的base64編碼數據var blob_ = dataURLtoBlob(_dataURL); // 用到Blob是因為圖片文件過大時，在一部風瀏覽器上會下載失敗，而Blob就不會var url = {name: name || "圖片.png", // 圖片名稱不需要加.png后綴名src: blob_};if (window.navigator.msSaveOrOpenBlob) { // if browser is IEnavigator.msSaveBlob(url.src, url.name);//filename文件名包括擴展名，下載路徑為瀏覽器默認路徑} else {var link = document.createElement("a");link.setAttribute("href", window.URL.createObjectURL(url.src));link.setAttribute("download", url.name + '.png');document.body.appendChild(link);link.click();}};image.src = imgsrc;function dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type: mime});}} </script>參考文獻：js 圖片下載（不是直接在頁面打開圖片）_Finchwei的博客-CSDN博客
總結
以上是生活随笔為你收集整理的js实现批量下载文件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 已知url地址，批量下载图片到指定目录
- 下一篇： 反应式框架Reactor中的Mono和F