JS批量下载图片

JS批量下载图片或文件(V2，已详细解说)

目标

例如，你在网上，看到某个网页可以下载很多图片资源，但是没有批量下载怎么办？于是，幻想有这么个函数 downloadImages(imageURLs) 批量下载。咋整？

方案

解决下载问题

一般情况下，用 <a> 标签可以实现文件的下载功能。一般下载是这样的代码：

<a href="/path/to/receipt.pdf" download>下载</a>

如此，点击下载，即可显示下载，此时文件名跟原名一样receipt.pdf。

download 属性配置目标文件(就是 href 属性指定的文件 )将被执行下载操作。

download 的可配置一个值，作为下载后的文件名。如果文件名没有限制，那么浏览器将自动检测当前文件的扩展名并添加到文件上 (.img, .pdf, .txt, .html, 等等)

如果没有配置一个值，原始文件名将被用上。

下边这种情况指定文件名。

<a href="/path/to/receipt.pdf" download="收据">下载</a>

如此，点击下载，即可显示下载并且文件名为收据.pdf。

解决下载图片时总是预览的问题

你可能已经意识到，上边的的这个方式对图片无法达到真正的下载，而是单纯的预览。应该怎么做呢？

我们可以通过将图片的二进制信息以Blob对象的方式存储，将其转换为URL对象，再让 <a> 来下载它。

1. fetch(imgUrl).then(res => blob()) 来获取图片二进制信息
2. URL.createObjectURL(blob) 来创建图片的 URL 对象
3. document.createElement("a") 来创建下载链接对象
4. <a href="{url}" download> 来重新指向需要下载的图片资源
5. 点击下载即可
6. 清理创建的对象即可（URL、下载链接）

function downloadImage(filename, url) {
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      // create URL and Link
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);

      // Invoke download
      a.click();

      // remove URL and Link
      window.URL.revokeObjectURL(url);
      a.remove();
    })
    .catch((err) => console.error(err.message));
}

// 已下载的文件名为"new-filename.jpg"
downloadImage('new-filename', 'path/or/url/to/your/image.jpg')

注意下载图片的时候，最好是在图片URL相同的域名之下，否则很多图片是禁止跨域访问的。

解决批量问题

这里不是批量下载如何写循环的问题，而是

1. 因为程序太快然而下载太慢所导致的一系列问题

我们就简化处理，一秒钟让它发送一个下载图片的请求。

for (let i=0; i<urls.length; i++) {
  setTimeout(() => {
    // codes for downloading an image
  }, i*1000)
}

总结代码

“Talk is cheap, show you the code”:

function downloadImage(filename, url) {
  fetch(url)
    .then((res) => res.blob())
    .then((blob) => {
      // create URL and Link
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);

      // Invoke download
      a.click();

      // remove URL and Link
      window.URL.revokeObjectURL(url);
      a.remove();
    })
    .catch((err) => console.error(err.message));
}

function downloadImages(urls) {
  for (let i = 0; i < urls.length; i++) {
    setTimeout(() => {
      // codes for downloading an image
      downloadImage(`${Date.now()}`, urls[i]);
    }, i * 1000);
  }
}

// download two images for example
downloadImages(["/path/to/image1.jpg", "/path/to/image2.png"]);

搞定，收功。

创作不易，请多珍惜。