Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/459.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jszip仅从url压缩两个文件中的一个_Javascript_Jszip - Fatal编程技术网

Javascript jszip仅从url压缩两个文件中的一个

Javascript jszip仅从url压缩两个文件中的一个,javascript,jszip,Javascript,Jszip,我正在尝试使用jszip加载项从URL压缩两个文件,我遇到了一个小问题。我正在尝试从一个url压缩两个文件(目前正在使用imgur链接进行测试),但是只压缩了我的一个文件。我不确定我在foreach函数中是否做错了什么 任何建议都会很棒,谢谢 function urlToPromise(url) { return new Promise(function(resolve, reject) { JSZipUtils.getBinaryContent(url, f

我正在尝试使用jszip加载项从URL压缩两个文件,我遇到了一个小问题。我正在尝试从一个url压缩两个文件(目前正在使用imgur链接进行测试),但是只压缩了我的一个文件。我不确定我在foreach函数中是否做错了什么

任何建议都会很棒,谢谢

function urlToPromise(url) 
{
    return new Promise(function(resolve, reject) 
    {
        JSZipUtils.getBinaryContent(url, function (err, data) 
        {
            if(err) 
            {
                reject(err);
            } else {
                resolve(data);
            }
        });
    });
}

(function () 
{
  var zip = new JSZip();
  var count = 0;
  var zipFilename = "instasamplePack.zip";
  var urls = [
    'https://i.imgur.com/blmxryl.png',
    'https://i.imgur.com/Ww8tzqd.png'
  ];

  function bindEvent(el, eventName, eventHandler) {
    if (el.addEventListener){
      // standard way
      el.addEventListener(eventName, eventHandler, false);
    } else if (el.attachEvent){
      // old IE
      el.attachEvent('on'+eventName, eventHandler);
    }
  }

  // Blob
  var blobLink = document.getElementById('kick');
  if (JSZip.support.blob) {
    function downloadWithBlob() {

      urls.forEach(function(url){
        var filename = "element" + count + ".png";
        // loading a file and add it in a zip file
        JSZipUtils.getBinaryContent(url, function (err, data) {
          if(err) {
            throw err; // or handle the error
          }
          zip.file(filename, urlToPromise(urls[count]), {binary:true});
          count++;
          if (count == urls.length) {
            zip.generateAsync({type:'blob'}).then(function(content) {
              saveAs(content, zipFilename);
            });
          }
        });
      });
    }
    bindEvent(blobLink, 'click', downloadWithBlob);
  } else {
    blobLink.innerHTML += " (not supported on this browser)";
  }

})();
当你这样做的时候

urls.forEach(function(url){
  var filename = "element" + count + ".png";               // 1
  JSZipUtils.getBinaryContent(url, function (err, data) {
    count++;                                               // 2
  });
});
执行
1
两次,下载完成后调用
2
<代码>计数在这两种情况下(在
1
)仍然为零,您将用另一个图像(相同的名称)覆盖一个图像

您还可以将每个图像下载两次:
urlToPromise
已经调用了
JSZipUtils.getBinaryContent

要解决这个问题:

  • 使用而不是
    计数
  • JSZip接受承诺(并在内部等待承诺),
    urlToPromise
    已经转换了一切:使用它
  • 不要试图等待承诺,JSZip已经做到了
这提供了一个新的
downloadWithBlob
功能:

function downloadWithBlob() {
  urls.forEach(function(url, index){
    var filename = "element" + index + ".png";
    zip.file(filename, urlToPromise(url), {binary:true});
  });
  zip.generateAsync({type:'blob'}).then(function(content) {
    saveAs(content, zipFilename);
  });
}

谢谢,你用Blob重写的下载内容正是我需要的