Daten-URL-Datei herunterladen

Ich spiele mit der Idee, ein vollständig JavaScript-basiertes Zip / Unzip-Dienstprogramm zu erstellen, auf das jeder über einen Browser zugreifen kann. Sie können einfach ihre Zip-Datei direkt in den Browser ziehen und so alle darin enthaltenen Dateien herunterladen. Sie können auch neue Zip-Dateien erstellen, indem Sie einzelne Dateien hineinziehen.

Ich weiß, es wäre besser, es am Server zu machen, aber dieses Projekt ist nur für ein bisschen Spaß.

Das Ziehen von Dateien in den Browser sollte einfach genug sein, wenn ich die verschiedenen verfügbaren Methoden nutze. (Google Mail-Stil)

Das Codieren / Decodieren sollte hoffentlich in Ordnung sein. Ich habe einige as3-Zip-Bibliotheken gesehen, daher bin ich mir sicher, dass ich damit einverstanden sein sollte.

Mein Problem ist das Herunterladen der Dateien am Ende.

window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' 

Dies funktioniert gut in Firefox, aber nicht in Chrom.

Ich kann die Dateien als Bilder in Chrome einbetten <img src="data:jpg/image;ba.." />, aber die Dateien müssen nicht unbedingt Bilder sein. Sie können jedes Format haben.

Kann sich jemand eine andere Lösung oder eine Problemumgehung vorstellen?

Ideen:

• Versuchen Sie eine <a href="data:...." target="_blank">(ungetestete)

• Verwenden Sie downloadify anstelle von Daten-URLs (würde auch für IE funktionieren)

Wenn Sie der Datei auch einen vorgeschlagenen Namen geben möchten (anstelle des Standard-Downloads), können Sie in Chrome, Firefox und einigen IE-Versionen Folgendes verwenden:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

Das folgende Beispiel zeigt die Verwendung:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
}

download("data:text/html,HelloWorld!", "helloWorld.txt");

oder:

function download(url, filename) {
fetch(url).then(function(t) {
    return t.blob().then((b)=>{
        var a = document.createElement("a");
        a.href = URL.createObjectURL(b);
        a.setAttribute("download", filename);
        a.click();
    }
    );
});
}

download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,HelloWorld!", "helloWorld.txt");

Möchten Sie meine Erfahrungen teilen und jemandem helfen, der an den Downloads festhält, die in Firefox nicht funktionieren, und die Antwort auf 2014 aktualisiert. Das folgende Snippet funktioniert sowohl in Firefox als auch in Chrome und akzeptiert einen Dateinamen:

  // Construct the <a> element
  var link = document.createElement("a");
  link.download = thefilename;
  // Construct the uri
  var uri = 'data:text/csv;charset=utf-8;base64,' + someb64data
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  // Cleanup the DOM
  document.body.removeChild(link);

Hier ist eine reine JavaScript-Lösung, die ich in Firefox und Chrome getestet habe, aber nicht in Internet Explorer:

function downloadDataUrlFromJavascript(filename, dataUrl) {

    // Construct the 'a' element
    var link = document.createElement("a");
    link.download = filename;
    link.target = "_blank";

    // Construct the URI
    link.href = dataUrl;
    document.body.appendChild(link);
    link.click();

    // Cleanup the DOM
    document.body.removeChild(link);
    delete link;
}

Bisher gefundene browserübergreifende Lösungen:

downloadify -> Benötigt Flash

Databounce -> In IE 10 und 11 getestet und funktioniert bei mir nicht. Erfordert ein Servlet und einige Anpassungen. (Erkennt den Navigator falsch. Ich musste den IE im Kompatibilitätsmodus zum Testen einstellen, den Standardzeichensatz im Servlet, das JavaScript-Optionsobjekt mit dem richtigen Servlet-Pfad für absolute Pfade ...) Bei Nicht-IE-Browsern wird die Datei im selben Fenster geöffnet.

download.js -> http://danml.com/download.html Eine andere Bibliothek ähnlich, aber nicht getestet. Behauptet, reines JavaScript zu sein, ohne Servlet oder Flash, funktioniert aber nicht mit IE <= 9.

Es gibt verschiedene Lösungen, die jedoch von HTML5 abhängen und in einigen Browsern noch nicht vollständig implementiert wurden. Die folgenden Beispiele wurden in Chrome und Firefox getestet (funktioniert teilweise).

1. Canvas-Beispiel mit Unterstützung für das Speichern in Dateien. Stellen Sie einfach Ihren document.location.hrefDaten-URI ein.
2. Beispiel für einen Anker-Download . Es verwendet den <a href="your-data-uri" download="filename.txt">Dateinamen angeben.

Diese Funktion kombiniert die Antworten von @owencm und @ Chazt3n und ermöglicht das Herunterladen von Text aus IE11, Firefox und Chrome. (Entschuldigung, ich habe keinen Zugriff auf Safari oder Opera, aber bitte fügen Sie einen Kommentar hinzu, wenn Sie es versuchen und es funktioniert.)

initiate_user_download = function(file_name, mime_type, text) {
    // Anything but IE works here
    if (undefined === window.navigator.msSaveOrOpenBlob) {
        var e = document.createElement('a');
        var href = 'data:' + mime_type + ';charset=utf-8,' + encodeURIComponent(text);
        e.setAttribute('href', href);
        e.setAttribute('download', file_name);
        document.body.appendChild(e);
        e.click();
        document.body.removeChild(e);
    }
    // IE-specific code
    else {
        var charCodeArr = new Array(text.length);
        for (var i = 0; i < text.length; ++i) {
            var charCode = text.charCodeAt(i);
            charCodeArr[i] = charCode;
        }
        var blob = new Blob([new Uint8Array(charCodeArr)], {type: mime_type});
        window.navigator.msSaveOrOpenBlob(blob, file_name);
    }
}

// Example:
initiate_user_download('data.csv', 'text/csv', 'Sample,Data,Here\n1,2,3\n');

Für alle, die Probleme im IE haben:

Bitte stimmen Sie der Antwort von Yetti hier zu: Speichern Sie die Leinwand lokal im IE

dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");

Ihr Problem läuft im Wesentlichen darauf hinaus, dass "nicht alle Browser dies unterstützen".

Sie könnten eine Problemumgehung versuchen und die entpackten Dateien von einem Flash-Objekt bereitstellen, aber dann würden Sie die reine JS-Reinheit verlieren (ich bin mir sowieso nicht sicher, ob Sie derzeit Dateien ohne eine Art Flash-Problemumgehung in den Browser ziehen können) - Ist das vielleicht eine HTML5-Funktion?)