Télécharger des images et télécharger comme Zip avec JSZip et JS-Zip Utils

Question

Je tente de télécharger quelques fichiers image, et de les stocker dans un seul fichier zip en utilisant JavaScript et JSZip. Mais ceci retourne un fichier zip vide. Qu'est-ce que je fais mal? J'utilise JSZip et 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 fonction intérieure se passe de manière asynchrone. Donc quand vous appelez zip.generateAsync, zip.file("picture.png", data, {binary:true}); n'est pas encore arrivé.

Voici mon exemple:

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

Essayez d'utiliser la fonction de l'exemple Mini app : downloader dans documentation. Cela va chercher le contenu et retourner la promesse pour ce contenu/image.

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});