javascript - JS如何在包括Firefox在内的浏览器中下载10个以上的文件

Question

我尝试使用以下代码一次下载多个文件:

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 解决方案感兴趣

Answer 1

与其下载多个文件，不如将它们全部打包到一个文件中。例如，您可以从所有这些文件生成一个 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>