Mehrere Download-Links zu einer Zip-Datei vor dem Download JavaScript

Ist es möglich, in Javascript, mehrere Download-URLs in eine Zip-Datei gesendet werden, und diese Zip-Datei kann heruntergeladen werden. So ziemlich, auf meiner Webseite gibt es eine Schaltfläche, die, wenn geklickt wird, eine Zip-Datei aller Dateien von den komprimierten Download-URLs in die Zip-Datei herunterlädt?Mehrere Download-Links zu einer Zip-Datei vor dem Download JavaScript

Ich glaube, ich müsste jszip oder ein ähnliches Tool verwenden. Ist das überhaupt möglich und gibt es Tipps, wo man anfangen soll?

Quelle

2016-05-12 Dude1310

zip Zieldateien auf ** Serverseite ** und das Rück url nach Klick –

über diese URL gefunden wird, dann lade Was Sie durch „mehr Download-Urls bedeuten "? – guest271314

@YinGang aber lassen Sie uns sagen, dass ich bereits die Download-Links für die Dateien in einem Array gespeichert haben. Wie würde ich diese komprimieren, damit der Benutzer nur die Datei herunterladen kann? – Dude1310

Sie können JSZip.js, XMLHttpRequest(), Array.prototype.map(), Promise.all().zip-Datei zu erstellen, wenn alle Anforderungen für Dateien abgeschlossen haben; verwendet <a> Element mit download Attribute auf objectURL von .zip Datei auf JSZip.generateAsync() Funktion, klicken Sie auf a Elemente sollte Save File Dialog mit erstellt .zip als herunterladbare Datei anzuzeigen.

<head> 
    <script src="jszip.js"></script> 
    <script> 
    window.onload = function() { 
     var zip = new JSZip(); 
     var a = document.querySelector("a"); 
     var urls = ["a.html", "b.html"]; 

     function request(url) { 
     return new Promise(function(resolve) { 
      var httpRequest = new XMLHttpRequest(); 
      httpRequest.open("GET", url); 
      httpRequest.onload = function() { 
      zip.file(url, this.responseText); 
      resolve() 
      } 
      httpRequest.send() 
     }) 
     } 

     Promise.all(urls.map(function(url) { 
      return request(url) 
     })) 
     .then(function() { 
      console.log(zip); 
      zip.generateAsync({ 
       type: "blob" 
      }) 
      .then(function(content) { 
      a.download = "folder" + new Date().getTime(); 
      a.href = URL.createObjectURL(content); 
      a.innerHTML = "download " + a.download; 
      }); 
     }) 
    } 
    </script> 
</head> 

<body> 
    <a href="" download>download</a> 
</body>

plnkr http://plnkr.co/edit/baPtkILg927DtJfh4b5Y?p=preview

Quelle

2016-05-12 03:38:06 guest271314

Das funktioniert nicht, wenn URLs heruntergeladen werden müssen. Das funktioniert nur, wenn Sie die HTML-Dateien im selben Ordner haben. Angenommen ich diesen Download-Link haben: https: \/\/www.youtubeinmp3.com \/download \/get \/i = trShzDCP0ESQ5bFdcMpe8y6H6WJvxYLXMa7OtmJMeO% 2BfxY1E1Rx5FQwsWk% 2BDS9fEoIXCo8QboB0dX6% 2FP0e2rJw% 3D% 3D Ich möchte eine Schaltfläche, dass, wenn darauf geklickt wird gesetzt? Diese Downloads in einen gezippten Ordner. Wenn ich a.html zu dem von mir bereitgestellten Link ändere, funktioniert es nicht mehr. – Dude1310

@ Dude1310 _ "Wenn ich a.html zu dem Link ändere, den ich zur Verfügung gestellt habe, funktioniert es nicht mehr." _ Die URL hat keinen 'Access-Control-Allow-Origin'-Header gesetzt _" 'XMLHttpRequest kann https: // nicht laden www.youtubeinmp3.com/download/?video=https://www.youtube.com/watch?v=i62Zjga8JOM Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Origin' http://stackoverflow.com 'ist daher nicht erlaubt. "" – guest271314

Ja, aber es gibt Möglichkeiten, das zu umgehen, zum Beispiel das Herunterladen dieser Chrome-Erweiterung: https://chrome.google.com/webstore/detail/allow-control- allow-origi/nlfmbbojpeacfghkbbhhdihlkkiljbi?hl = de und auch nach dem Download, das Ersetzen von a.html mit dem Download-Link für die mp3-Datei, die ich bereitgestellt wird nicht funktionieren, weil es einen Fehler angibt, dass sie nicht den Speicherort der mp3-Datei finden konnten, weil Ihr Code Ich lade nur Dateien herunter, die du bereits gespeichert hast. Ich versuche eine heruntergeladene Datei aus dem Internet in einen Zip-Ordner zu laden. – Dude1310

Vor kurzem hatte ich das gleiche Problem zu lösen und eine Lösung mit JSZipUtils gefunden hatte.

Die Lösung finden Sie hier http://plnkr.co/edit/vWARo0dXbkgzmjyoRNi0?p=preview

Ich habe zwei Dateien, die Ich mag würde über den Browser des Benutzers zip und downloaden, und ich rufe die Funktion getBinaryContent(path, callback) auf beiden Dateien. Der Pfad hier ist der Speicherort der Datei.

Die beiden Dateien sind eine .wav-Datei und eine .json-Datei. Jeder von ihnen sollte unterschiedlich behandelt werden und daher sollten Sie {base64:true,binary:true} für die .wav-Datei und {binary:true} für die JSON-Datei als Argument für die Funktionsdatei JSZip verwenden.

kann der Code auch hier

var file_confirmation=[false,false]; 
var file_name=["test1.wav","test.json"]; 
var urlList =["test.wav","test.json"]; 

var filenameSave ="myZip"; 


function zipFiles(id,urls) 
{ 
    zip = new JSZip(); 

JSZipUtils.getBinaryContent(urls[0],function (err, data) 
{ 
    if(!err) 
    { 
     var dic={base64:true,binary:true}; //WAV File Encoding 
     zip.file(file_name[0], data, dic); 
     file_confirmation[0]=true; 
     downloadZipIfAllReady(id); 
    } 
}); 

JSZipUtils.getBinaryContent(urls[1],function (err, data) 
    { 
     if(!err) 
     { 
      var dic={binary:true}; //JSON File Encoding 
      zip.file(file_name[1], data, dic); 
      file_confirmation[1]=true; 
      downloadZipIfAllReady(id); 
     } 
    }); 
}  

function downloadZipIfAllReady(id) 
    { 
     if(file_confirmation.every(function(element, index, array) {return element;})) 
     { 
      zip.generateAsync({type:"blob"}) 
       .then(function(content) 
       { 
        var a = document.querySelector("#"+id); 
        a.download = filenameSave; 
        a.href = URL.createObjectURL(content); 
        a.click(); 
      }); 
    } 
} 


$(document).ready(function() 
{ 

zipFiles("a_id",urlList); 

})

Quelle

2016-08-22 22:49:23

Wenn ich dein Beispiel als Zip-Datei herunterladen und die Index-Datei von meinem Computer laufen nichts passiert, würde weißt du irgendeinen Grund dafür? https://www.dropbox.com/s/0k4e3s79xp6fsap/Screenshot%202017-01-15%2016.55.20.png?dl=0 –

Ich würde sagen, Debug die Javascript-zipFiles-Methode und sehen, was los ist. –

Das Problem ist der Zugriff auf den Link mit file: //: .. Sie sollten stattdessen einen lokalen Server (wie XAMPP) installieren und lokal mit localhost /..../ index öffnen.html und dann verschwindet der Kreuzursprungfehler –

Mehrere Download-Links zu einer Zip-Datei vor dem Download JavaScript

Antwort

Verwandte Themen