前端用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库添加到页面中,否则上面的代码将无法工作

温馨提示: 本文最后更新于2024-02-04 21:39:12,某些文章具有时效性,若有错误或已失效,请在下方 留言或联系 沐橙论坛
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容