Bilder herunterladen und als Zip mit JSZip und JS-Zip Utils herunterladen

Question

Ich versuche, ein paar Bilddateien herunterzuladen, und speichern Sie es in einer einzigen Zip-Datei mit JavaScript und JSZip. Aber das gibt eine leere Zip-Datei zurück. Was mache ich falsch? Ich verwende JSZip und JSZip-utils

function createZip() { 

//Create zip file object 
var zip = new JSZip(); 

//Add folders 

//Add files 
JSZipUtils.getBinaryContent("icons/8_Bit_Character.png", function (err, data) { 
    if(err) { 
     throw err; // or handle the error 
    } 
    zip.file("picture.png", data, {binary:true}); 
}); 

JSZipUtils.getBinaryContent("icons/16_Bit_Character.png", function (err, data) { 
    if(err) { 
     throw err; // or handle the error 
    } 
    zip.file("picture2.png", data, {binary:true}); 
}); 

//Compile all the data into memory. 
var base64 = null; 
if (JSZip.support.uint8array) { 
    promise = zip.generateAsync({type : "uint8array"}); 
} else { 
    promise = zip.generateAsync({type : "string"}); 
} 

//Generate the zip file and download it. 
zip.generateAsync({type:"base64"}).then(function (base64) { 
    location.href="data:application/zip;base64," + base64; 
}); 

} 

Answer 1

JSZipUtils.getBinaryContent innere Funktion asynchron geschieht. Also, wenn Sie zip.generateAsync anrufen, ist zip.file("picture.png", data, {binary:true}); noch nicht passiert.

Hier ist mein Beispiel:

var count = 0; 
....... 
JSZipUtils.getBinaryContent(imageUrl, function (err, data) { 
      if (err) { 
       // throw err; // or handle the error 
       console.log(err); 
      } 
      else { 
       zip.file(fileName, data, { binary: true }); 
       count++;      
       if (count == selectedImages.length) {       
        zip.generateAsync({ type: "blob" }).then(function (base64) {        
        // window.location.replace("data:application/zip;base64," + base64); 

         saveAs(base64, `archive.zip`); 

         console.log("inner"); 
        }); 
       } 
      } 
     }); 

Answer 2

Try-Funktion aus dem Mini app : downloader Beispiel in documentation verwenden. Dies wird den Inhalt abrufen und das Versprechen für diesen Inhalt/dieses Bild zurückgeben.

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

zip.file(filename, urlToPromise(url), {binary:true});