Comment faire pour télécharger, zip et enregistrer plusieurs fichiers Javascript et obtenir des progrès?

Je suis de la création d'une extension Chrome qui a besoin de télécharger de multiples fichiers (images et/ou vidéos) à partir d'un site web. Ces fichiers peuvent avoir une taille énorme, donc je veux afficher la progression du téléchargement de l'utilisateur. Après quelques recherches, j'ai constaté qu'actuellement une solution possible pourrait être:

  1. Télécharger tous les fichiers avec XMLHttpRequests.
  2. Lors du téléchargement, zip de tous les fichiers dans une archive avec une librairie JavaScript (ex. JSZip.js, zip.js).
  3. Invite l'utilisateur à enregistrer le zip avec la boîte de dialogue enregistrer sous.

Je suis coincé à passage 2), comment puis-je compresser les fichiers téléchargés?

À comprendre, voici un exemple de code:

var fileURLs = ['http://www.test.com/img.jpg',...];
var zip = new JSZip();

var count = 0;
for (var i = 0; i < fileURLs.length; i++){
    var xhr = new XMLHttpRequest();
    xhr.onprogress = calculateAndUpdateProgress;
    xhr.open('GET', fileURLs[i], true);
    xhr.responseType = "blob";
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
               var blob_url = URL.createObjectURL(response);
            //add downloaded file to zip:
            var fileName = fileURLs[count].substring(fileURLs[count].lastIndexOf('/')+1);
            zip.file(fileName, blob_url); //<- here's one problem

            count++;
            if (count == fileURLs.length){
                //all download are completed, create the zip
                var content = zip.generate();

                //then trigger the download link:
                var zipName = 'download.zip';
                var a = document.createElement('a'); 
                a.href = "data:application/zip;base64," + content;
                a.download = zipName;
                a.click();
            }
        }
    };
    xhr.send();
}

function calculateAndUpdateProgress(evt) {
    if (evt.lengthComputable) {
        //get download progress by performing some average 
        //calculations with evt.loaded, evt.total and the number
        //of file to download /already downloaded
        ...
        //then update the GUI elements (eg. page-action icon and popup if showed)
        ...
    }
}

Le code supérieur de générer une archive téléchargeable contenant de petits fichiers corrompus.
Il y a aussi un problème avec le nom de fichier de synchronisation: objet blob ne contient le nom de fichier, donc Si par exemple. fileURLs[0] prend plus de temps à être téléchargé que fileURLs[1] noms de devenir mauvais (inversé)..

NOTE: je sais que google Chrome dispose d'une API de téléchargement, mais il est en dev channel donc, malheureusement, ce n'est pas une solution maintenant, et je voudrais éviter d'utiliser NPAPI pour une telle tâche simple.

Comme je l'ai lu la question, vous souhaitez compresser toutes les images et de fournir un zip en téléchargement, à droite? Alors la réponse à l'autre question est de 100% applicable. Remplacer l'URL d'un data-URL ou blob URL que vous générez à l'aide de la fermeture éclair de la bibliothèque de votre choix. Si vous voulez un exemple, n'hésitez pas à regarder dans le code source de mon extension Chrome source viewer extension. popup.js montre le code pour lancer un téléchargement d'un fichier zip généré.
Je vois que vous avez tenté de copier le code de mon poste sans le comprendre, est-ce exact? Si oui, lisez la documentation pour zip.js et de revenir lorsque vous êtes bloqué ou si quelque chose n'est pas clair: gildas-lormeau.github.io/zip.js/core-api.html
à partir de votre extension (utile), j'ai utilisé uniquement le code pour déclencher le téléchargement, le problème n'est pas là, c'est avec le passage téléchargé fichier de données binaires dans le zip de la bibliothèque, je ne comprends pas comment il a à faire, puisque je n'ai pas trouvé de la documentation connexe.
Dans mon poste, je télécharge un zip en fichier compatible, et immédiatement en le présentant comme un téléchargement. Ce n'est pas OK dans votre cas, parce que vous êtes le téléchargement d'une image, et que vous voulez compresser. J'ai juste trouvé une autre question qui semble exactement en ligne avec votre originale et nouvelle question: stackoverflow.com/questions/14180375/...
Je sais, j'ai déjà lu cette réponse, mais dans ce cas, si les fichiers sont téléchargés en interne par le zip de la bibliothèque (et non pas avec xhr demande dans mon code), comment puis-je obtenir des informations sur la progression du téléchargement, pour informer l'utilisateur dans le cas où les fichiers de prendre quelques minutes pour être téléchargé?

OriginalL'auteur guari | 2013-06-24

  1. 7

    J'ai été rappelé à cette question.. car il n'a pas de réponses encore, j'écris une solution possible dans le cas où il peut être utile à quelqu'un d'autre:

    • comme l'a dit, le premier problème est avec le passage blob url jszip (il ne prend pas en charge les gouttes, mais il ne jetez pas d'erreur de notification et avec succès génère une archive de fichiers corrompus): pour corriger cela, il suffit de passer une chaîne base64 les données au lieu de son objet blob url;
    • le deuxième problème est avec le nom de fichier de synchronisation: la méthode la plus simple solution de contournement consiste à télécharger un fichier à la fois au lieu de l'aide de parallels demandes xhr.

    Donc, la modification de code supérieur peut être:

    var fileURLs = ['http://www.test.com/img.jpg',...];
var zip = new JSZip();
var count = 0;
downloadFile(fileURLs[count], onDownloadComplete);
function downloadFile(url, onSuccess) {
var xhr = new XMLHttpRequest();
xhr.onprogress = calculateAndUpdateProgress;
xhr.open('GET', url, true);
xhr.responseType = "blob";
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (onSuccess) onSuccess(xhr.response);
}
function onDownloadComplete(blobData){
if (count < fileURLs.length) {
blobToBase64(blobData, function(binaryData){
//add downloaded file to zip:
var fileName = fileURLs[count].substring(fileURLs[count].lastIndexOf('/')+1);
zip.file(fileName, binaryData, {base64: true});
if (count < fileURLs.length -1){
count++;
downloadFile(fileURLs[count], onDownloadCompleted);
}
else {
//all files have been downloaded, create the zip
var content = zip.generate();
//then trigger the download link:        
var zipName = 'download.zip';
var a = document.createElement('a'); 
a.href = "data:application/zip;base64," + content;
a.download = zipName;
a.click();
}
});
}
}
function blobToBase64(blob, callback) {
var reader = new FileReader();
reader.onload = function() {
var dataUrl = reader.result;
var base64 = dataUrl.split(',')[1];
callback(base64);
};
reader.readAsDataURL(blob);
}
function calculateAndUpdateProgress(evt) {
if (evt.lengthComputable) {
...
}
}

    Dernière remarque, cette solution fonctionne très bien si vous téléchargez et quelques petits fichiers (environ moins de 1 mo entiers de taille pour moins de 10 dossiers), dans d'autres cas JSZip panne de l'onglet du navigateur lorsque l'archive va être généré, de sorte qu'il sera un meilleur choix pour l'utilisation d'un thread séparé pour la compression (une WebWorker, comme zip.js n').

    Si, après que l'archive a été généré, le navigateur conserve encore de s'écraser avec de gros fichiers et sans signaler d'éventuelles erreurs, essayer de déclencher le saveAs fenêtre sans passer des données binaires, mais par le passage d'une goutte de référence (a.href = URL.createObjectURL(zippedBlobData); où zippedBlobData est la goutte qui se réfère à l'archive générée données);

    mais un.href "type de données:application/zip" ne sera pas déclencher un téléchargement, il sera? peut-être des données:l'attachement peut être utilisé ici?

    OriginalL'auteur guari