使用 JsZip 以编程方式创建 zip 文件答案

【问题标题】：Using JsZip to create zip file programmatically使用 JsZip 以编程方式创建 zip 文件
【发布时间】：2017-05-15 04:19:12
【问题描述】：

我想在循环中的 zip 中插入文件 pdf 并在下载文件 zip 之后。

问题是当我尝试下载空文件时。如果我在控制台上打印一个可变 zip，它就有我的文件..

var zip = new JSZip();
var nomeCliente = "";
this.state.docs.forEach(function(itemDoc, index) {
  var file = new File([this.dataURItoBlob(response.data)], itemComment.comment_file_name, {type: response.mime+"charset=utf-8"});
      zip.folder(itemDoc.person_firstname).folder(itemDoc.category_description).file(itemComment.comment_file_name, file);
}
zip.generateAsync({type:"blob"})
	.then(function(content) {
    FileSaver.saveAs(content, nomeCliente+".zip");
});

【问题讨论】：

添加文件和文件夹后需要generate()，全部完成。
我以前做过这样的事情。见here。
您有空文件（0 字节）还是空 zip 文件（22 字节）？可以在调用 generateAsync 之前添加 console.log(zip.files) 吗？在调用saveAs之前也是console.log(content.size)。
一个空的 zip 文件 @DavidDuponchel....
@dandavis ，我做到了.. 看看代码，我的第一个循环是在我的 generate() 上填充 zip 文件，如果我在控制台上打印的内容是空的。

标签： javascript jszip

【解决方案1】：

从我在您在 cmets 中发布的视频中可以看到，您的代码可以概括为：

var zip = new JSZip();
docs.forEach(function () {                    // 1
  requestComments().end(function () {
    requestCommentFile().end(function () {
      zip.folder(...).folder(...).file(...);  // 2
    })
  });
  triggerDownload(zip);                       // 3
});

HTTP 请求是异步的：requestComments 和 requestCommentFile 需要一些时间才能完成，您需要等待它们才能调用 triggerDownload。此处，执行顺序为 1、3、2：您准备 HTTP 请求，触发下载（使用空的 zip 文件），然后 HTTP 请求结束并填写 zip 对象。

要解决此问题，您必须等待所有请求完成后再调用saveAs。

JSZip 接受承诺作为内容，但这里每个请求都可能导致多个 zip 条目，因此您不能使用它。相反，请使用 Promise 和 Promise.all。

您使用哪个 ajax 库？如果结果与 ES6 Promises 兼容，则可以转换代码：

// from
comments.forEach(function () {
  request.post(...)
  .send(...)
  .end(function() {
    zip.file(...);
  });
});

// to
var commentsP = comments.map(function () { // forEach to map
  return request.post(...)                 // return here
  .send(...)
  .then(function() {                       // each time you see a then
    return zip.file(...);                  // ends with a return
  });
});
return Promise.all(commentsP);

在此示例中，commentsP 是一个承诺列表，Promise.all 会将其转换为结果列表的承诺。这意味着一旦它解决，所有包含的承诺都已解决。

对所有 ajax 请求执行此操作（不要忘记任何 return，它允许链接内部承诺）。最后，在调用triggerDownload（视频中的baixarZip）之前等待顶级承诺。

【讨论】：