So erstellen Sie einen HTML-Browser-Export und -Download mit JS

Dieser Artikel zeigt Ihnen hauptsächlich die Methode zum Erstellen eines HTML-Browser-Export-Downloads mit JS. Er verwendet hauptsächlich das Download-Attribut und den Blob von HTML5.

URL.createObjectURL

Die Methode URL.createObjectURL() erstellt eine URL, die auf das Parameterobjekt verweist, basierend auf den übergebenen Parametern. Das Leben dieser URL existiert nur in dem Dokument, in dem sie ist wird erstellt. . Die neue Objekt-URL zeigt auf das ausgeführte Dateiobjekt oder Blob-Objekt.

objectURL = URL.createObjectURL(blob || file);1

Dateiobjekt oder Blob Objekt
Hier sprechen wir kurz über Dateiobjekte und Blob-Objekte:
Dateiobjekt ist eine Datei. Wenn ich beispielsweise das Tag „input type="file" zum Hochladen von Dateien verwende, ist jede darin enthaltene Datei ein Dateiobjekt .
Blob-Objekte sind beispielsweise durch new Blob() erstellte Blob-Objekte. Wenn in XMLHttpRequest der Antworttyp ebenfalls als Blob-Objekt angegeben ist 🎜>*Hinweis
Bei jedem Aufruf von createObjectURL wird ein neues URL-Objekt erstellt. Auch wenn Sie bereits eine URL für dieselbe Datei erstellt haben, müssen Sie zum Freigeben das verwenden URL.revokeObjectURL()-Methode: Wenn die Seite geschlossen wird, gibt der Browser sie automatisch frei. Für eine optimale Leistung und Speichernutzung sollte sie jedoch freigegeben werden, wenn sichergestellt ist, dass sie nicht mehr benötigt wird Die Methode .revokeObjectURL

URL.revokeObjectURL() gibt eine von URL.createObjectURL() erstellte Objekt-URL frei. Wenn Sie diese Objekt-URL verwendet haben, müssen Sie dem Browser mitteilen, dass diese URL nicht mehr verweisen muss Wenn Sie diese Methode aufrufen müssen, bedeutet dies, dass eine Objekt-URL für den Zugriff auf die angegebene Datei verwendet werden kann, ich jedoch nur einmal darauf zugreifen muss. Die Objekt-URL wird freigegeben, wenn sie nicht mehr benötigt wird. Nach der Freigabe verweist die Objekt-URL nicht mehr auf die angegebene Datei.

Für ein Bild habe ich beispielsweise eine Objekt-URL erstellt Dann wird über diese Objekt-URL dieses Bild auf meine Seite geladen. Da es geladen wurde und dieses Bild nicht erneut geladen werden muss, gebe ich die Objekt-URL frei und diese URL verweist dann nicht mehr auf dieses Bild.

Fenster.URL.revokeObjectURL(objectURL);1

Dateimethode herunterladen

Verwandte Empfehlungen:

var funDownload = function (content, filename) {
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';    // 字符内容转变成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);    // 触发点击
    document.body.appendChild(eleLink);
    eleLink.click();    // 然后移除
    document.body.removeChild(eleLink);
};

html Der Browser zeigt verstümmelten Code_html/css_WEB -ITnose

an

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen HTML-Browser-Export und -Download mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!