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>"))
BlobBuilder
ist veraltet, verwenden Sie stattdessen Blob
Konstruktor :
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'})
);
});
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.
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(...)