jszipはURLから2つのファイルの1つを圧縮しています

Question

jszip addを使用してURLから2つのファイルを解凍しようとしていますが、少し問題があります。私はURLから2つのファイルを圧縮しようとしています（imgurリンクで現在テスト中）が、私のファイルの1つだけが圧縮されています。私が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)"; 
    } 

})(); 

Answer 1

あなたは

urls.forEach(function(url){ 
    var filename = "element" + count + ".png";    // 1 
    JSZipUtils.getBinaryContent(url, function (err, data) { 
    count++;            // 2 
    }); 
}); 

を行うと、あなたが2を呼び出す1 2倍とダウンロード仕上げを実行します。 countがどちらの場合もまだ0である場合（1）、一方のイメージを他方のイメージ（同じ名前）で上書きします。

また、各画像を2回ダウンロードする：urlToPromiseは既にJSZipUtils.getBinaryContentと呼ばれています。

それを使用することは待つことを試みてはいけない：urlToPromiseはすでにすべてを変換し、index parameter of the forEach callback代わりのcount

JSZip約束を受け入れ（および内部にそれらを待つ）を使用

• ：それを修正するには

  約束のために、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); 
    }); 
}