webentwicklung-frage-antwort-db.com.de

Fehler beim Ausführen von 'atob' in 'Window'

Ich versuche, meine HTML-Datei in Chrome) zu speichern, wenn der Benutzer ctrl + s Drückt, aber Chrome ist abgestürzt.

(Ich möchte nur den Quellcode meiner HTML-Datei herunterladen)

Ich habe gelesen, dass es passiert, weil meine Datei größer als 1,99 MB ist.

Im ersten Versuch (bevor ich von dem Absturz in Chrome wusste):

function download(filename, text) {
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);
    pom.click();
}

download('test.html', "<html>" + document.getElementsByTagName('html')[0].innerHTML + "</html>");

Beim zweiten Versuch, nachdem ich über den Absturz gelesen hatte, verwendete ich blob:

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    var bb = new BlobBuilder();
    bb.append(ab);
    return bb.getBlob(mimeString);
}

function download(dataURI) {
    var blob = dataURItoBlob(dataURI);
    var url  = window.URL.createObjectURL(blob);
    window.location.assign(url);
}

download("<html>" + document.getElementsByTagName('html')[0].innerHTML + "</html>")

Hier habe ich den Fehler bekommen: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

Ich weiß es nicht, aber ich habe gelesen, dass ich meine Zeichenfolge in base64 codieren muss: Wie können Sie eine Zeichenfolge in JavaScript in Base64 codieren?

Es gibt eine Antwort von 148 Stimmen. Ich füge es in meinen Code ein und weiß nicht, wie ich weitermachen soll.

Wo soll ich es nennen und wie? Kann ich meiner gespeicherten Datei einen Namen geben?

Ich denke, dass ich etwas tun muss wie:

download(_utf8_decode("<html>" + document.getElementsByTagName('html')[0].innerHTML + "</html>"))
26
Alon Shmiel

BlobBuilder ist veraltet, verwenden Sie stattdessen BlobKonstruktor :

URL.createObjectURL(new Blob([/*whatever content*/] , {type:'text/plain'}));

Dies gibt eine Blob-URL zurück, die Sie dann in href eines Ankers verwenden können. Sie können auch das download -Attribut eines Ankers ändern, um den Dateinamen zu ändern:

<a href="/*assign url here*/" id="link" download="whatever.txt">download me</a>

Gefummelt . Wenn ich mich richtig erinnere, gibt es willkürliche Einschränkungen für vertrauenswürdige Downloads, die nicht vom Benutzer initiiert wurden. Daher bleiben wir bei einem Link-Klick, der als ausreichend benutzerinitiiert angesehen wird :)

Update: Es ist eigentlich ziemlich trivial, das HTML des aktuellen Dokuments zu speichern! Jedes Mal, wenn auf unseren interaktiven Link geklickt wird, wird sein href mit einem relevanten Blob aktualisiert. Nach dem Ausführen des Click-Bound-Ereignisses ist dies die Download-URL, zu der navigiert wird!

$('#link').on('click', function(e){
  this.href = URL.createObjectURL(
    new Blob([document.documentElement.outerHTML] , {type:'text/html'})
  );
});

Wieder gefummelt .

19
o.v.

Hier habe ich den Fehler bekommen: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

Weil Sie keine Base64-codierte Zeichenfolge übergeben haben. Schauen Sie sich Ihre Funktionen an: download und dataURItoBlob erwarten aus irgendeinem Grund einen Daten-URI ; Sie übergeben jedoch in Ihrem Beispiel eine einfache HTML-Markup-Zeichenfolge an download.

HTML ist nicht nur als base64 ungültig, Sie rufen auch .split(',')[1] auf, was undefined ergibt - und "undefined" Ist auch kein gültiger base64-codierter String.

Ich weiß es nicht, aber ich habe gelesen, dass ich meinen String in base64 kodieren muss

Das ergibt für mich keinen Sinn. Sie wollen es irgendwie verschlüsseln, nur um es dann zu entschlüsseln?

Wie soll ich anrufen und wie?

Ändern Sie die Schnittstelle Ihrer Funktion download dahin zurück, wo sie die Argumente filename und text erhalten hat.

Beachten Sie, dass BlobBuilder nicht nur das Anhängen ganzer Zeichenfolgen unterstützt (Sie müssen also diese ArrayBuffer -Dinge nicht erstellen), sondern auch zugunsten von veraltet ist Blob Konstruktor .

Kann ich meiner gespeicherten Datei einen Namen geben?

Ja. Verwenden Sie nicht den Konstruktor Blob , sondern den Konstruktor File .

function download(filename, text) {
    try {
        var file = new File([text], filename, {type:"text/plain"});
    } catch(e) {
        // when File constructor is not supported
        file = new Blob([text], {type:"text/plain"});
    }
    var url  = window.URL.createObjectURL(file);
    …
}

download('test.html', "<html>" + document.documentElement.innerHTML + "</html>");

Siehe JavaScript-Blob-Dateiname ohne Link was mit dieser Objekt-URL zu tun ist, nur die aktuelle Position darauf zu setzen, funktioniert nicht.

5
Bergi

hier ist eine aktualisierte Geige, in der die Benutzereingaben automatisch im lokalen Speicher gespeichert werden. Jedes Mal, wenn die Geige erneut ausgeführt oder die Seite aktualisiert wird, wird der vorherige Status wiederhergestellt. Auf diese Weise müssen Sie die Benutzer nicht zum Speichern auffordern, sondern speichern nur von selbst.

http://jsfiddle.net/tZPg4/9397/

ein Stapelüberlauf erfordert, dass ich einen Code mit einem jsFiddle-Link einbinde. Ignoriere daher bitte das Snippet:

localStorage.setItem(...)
2
Jeremy Danyow