使用 jsZip 将图像从 url 添加到 zip 文件

Adding images from url to a zip file using jsZip

本文关键字：添加 zip 文件 url jsZip 图像 使用      更新时间：2023-09-26

我正在尝试使用jsZip创建一个zip文件。zip文件的内容是来自网络的图像。我创建了以下代码。但是当我运行它时，我得到的只是一个 22kb 的空 zip 文件。

<html>
<body>
  <script type="text/javascript" src="jszip.js"></script>
  <script type="text/javascript" src="FileSaver.js"></script>
  <script type="text/javascript" src="jszip-utils.min.js"></script>
  <script>
    var imgLinks = ["url1", "url2", "url3"];
    function create_zip() {
      var zip = new JSZip();
      for (var i = 0; i < imgLinks.length; i++) {
        JSZipUtils.getBinaryContent(imgLinks[i], function(err, data) {
          if (err) {
            alert("Problem happened when download img: " + imgLink[i]);
            console.erro("Problem happened when download img: " + imgLink[i]);
            deferred.resolve(zip); // ignore this error: just logging
            // deferred.reject(zip); // or we may fail the download
          } else {
            zip.file("picture" + i + ".jpg", data, {
              binary: true
            });
            deferred.resolve(zip);
          }
        });
      }
      var content = zip.generate({
        type: "blob"
      });
      saveAs(content, "downloadImages.zip");
    }
  </script>
  <br/>
  <br/>
  <center>
    Click the button to generate a ZIP file
    <br/>
    <input id="button" type="button" onclick="create_zip()" value="Create Zip" />
  </center>
</body>
</html>

（url1、url2 和 url3 替换为我要下载的图像 URL）。

为什么我会收到这些空的 zip 文件？

JSZipUtils.getBinaryContent是异步的：内容将在调用zip.generate()后添加。在生成 zip 文件之前，您应该等待所有图像。

编辑：

如果要加载的文件位于其他服务器上，则此服务器需要发送其他 HTTP 标头，例如 Access-Control-Allow-Origin: server-hosting-the-page.com 。在这种情况下，Firefox 或 Chrome 调试控制台将显示错误。js 库无法检测到 CORS 问题（请参阅此处），并且会触发空内容的成功。

相关文章：