前端用Javascript如何实现图片批量下载？-倦意博客

前言：

前端用JS做批量下载的方法网上很多，但是这些年由于大多数现代浏览器（包括Google Chrome）通常会阻止通过JavaScript自动下载文件，使得一些通过a标签批量打开下载的办法失效。

做这个研究是因为最近有粉丝提出小红书的图片能不能批量下载，刚开始我也是通过a标签模拟点击事件，但是结果是不可行的，a标签只会显示图片而不是下载图片，通过一番研究，目前只有把图片打包成Zip这一条路可走，废话不多说，下面贴上代码！

代码：

1.首先引入jszip：

<script src="js/jszip.min.js"></script>

jszip官方下载

下载

2.写入以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>批量下载图片</title>
</head>
<body>
  <button onclick="downloadImages()">批量下载图片</button>
  <script>
    function downloadImages() {
      const imageUrls = [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
        // 添加更多图片URL
      ];

      const zip = new JSZip();

      const downloadPromises = imageUrls.map((url, index) => {
        return fetch(url)
          .then(response => response.blob())
          .then(blob => {
            zip.file(`image_${index + 1}.jpg`, blob);
          });
      });

      Promise.all(downloadPromises).then(() => {
        zip.generateAsync({ type: 'blob' }).then(blob => {
          const downloadLink = document.createElement('a');
          downloadLink.href = URL.createObjectURL(blob);
          downloadLink.download = 'images.zip';
          downloadLink.click();
        });
      });
    }
  </script>
</body>
</html>

上面的代码使用JSZip库将图片打包成 zip 文件，并在用户点击”批量下载图片”按钮时，通过创建一个临时链接实现下载。请确保将JSZip库添加到页面中，否则上面的代码将无法工作