我尝试使用以下代码一次下载多个文件：
var urls = [...];
for(var i = 0; i < urls.length; i++) {
var tempLink = document.createElement('a');
tempLink.setAttribute('href', urls[i]);
tempLink.setAttribute('download', urls[i].split('/')[urls[i].split('/').length*1-1*1]);
tempLink.click();
}
还有两个问题：
1.Chrome 和 Opera 一次仅下载 10 个文件
2.在 Firefox 中，代码根本不起作用
这两个问题如何解决？
附注我知道如何使用服务器端压缩所有文件，但我对没有服务器端的静态网站的 JS 解决方案感兴趣
最好的方法可能是将它们全部打包在一个文件中，而不是下载多个文件。
例如，您可以从所有这些文件生成一个 zip 文件。
既然您说过服务器端解决方案不适合您，但您的所有文件都托管在您的域上，那么我可以建议您首先通过 AJAX 获取所有文件（因为这些是页面上已加载的图像，它们甚至不需要再次实际下载，而只需从缓存中收集），然后在前端构建 zip 文件。
// all images are from wikimedia
const urls = ['/3/3b/Hulda_Klagers_house_and_lawn.jpg/320px-Hulda_Klagers_house_and_lawn.jpg', '/1/15/P%C3%A8re-Lachaise_-_Division_79_-_Floriot_02.jpg/320px-P%C3%A8re-Lachaise_-_Division_79_-_Floriot_02.jpg', '/a/a6/V37-20180910-055_%2845088120261%29.jpg/320px-V37-20180910-055_%2845088120261%29.jpg', '/2/2b/MormantulLuiAmzaPellea_%284%29.JPG/360px-MormantulLuiAmzaPellea_%284%29.JPG', '/f/f8/Launch_of_LAWRENCE_LCCN2014710971.tif/lossy-page1-174px-Launch_of_LAWRENCE_LCCN2014710971.tif.jpg']
.map((url) => 'https://upload.wikimedia.org/wikipedia/commons/thumb' + url);
fetchBlobs(urls)
.then(pack)
.then((zipFile) => dl.href = URL.createObjectURL(zipFile));
function fetchBlobs(urls) {
return Promise.all(
urls.map((url) =>
fetch(url)
.then((resp) => resp.blob())
.then((blob) => {
// store the file name
blob.name = url.slice(url.lastIndexOf('/') + 1)
return blob;
})
)
);
}
function pack(blobs) {
const zip = new JSZip();
const folder = zip.folder('my_images');
blobs.forEach((blob) => folder.file(blob.name, blob));
return zip.generateAsync({type : "blob"});
}
<!-- using JSZip library https://stuk.github.io/jszip/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>
<a id="dl" download="images.zip">download</a>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
