循环所有文件后如何创建zip文件?

时间:2017-01-06 09:55:26

标签: javascript for-loop xmlhttprequest

我使用JSzip创建包含所有图像文件的zipfile。我使用XMLHttpRequest从循环内的外部链接获取图像。根据我的代码zipfile创建完成之前的XMLHttpRequest。所以它返回空的zip文件。循环所有文件后如何创建zip文件?

$this->dataArray['name']

1 个答案:

答案 0 :(得分:2)

JSZip支持promises作为内容:您可以将每个HTTP调用包装到promises中,而不是显式等待。

第一个函数downloadUrlAsPromise将xhr调用包装成Promise。第二个函数downloadFirebaseImagegetDownloadURL的承诺与第一个函数的承诺联系起来。结果是对xhr内容的承诺。

一旦你拥有了这个,你就可以直接向JSZip提供承诺:

zip.file(i+".png", downloadFirebaseImage(imagePath));

完整方法:

function downloadUrlAsPromise (url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = "arraybuffer";
    xhr.onreadystatechange = function(evt) {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.response);
        } else {
          reject(new Error("Ajax error for " + url + ": " + xhr.status));
        }
      }
    });
    xhr.send();
  });
}

function downloadFirebaseImage(storageRef, path) {
  var starsRef = storageRef.child(imagePath);
  return starsRef.getDownloadURL().then(function(url) {
    return downloadUrlAsPromise(url);
  });
}


// ...
for (i = 1; i <= count; i++) { 
  console.log(path+i+".png");
  var imagePath = path+i+".png";
  zip.file(i+".png", downloadFirebaseImage(imagePath));
}

zip.generateAsync({type:"blob"})
.then(function(content) {
  // see FileSaver.js
  saveAs(content, "my.zip");
});