Website-Suche

javascript - Wie öffnet man einen String als HTML-Inhalt in einem neuen Tab?

public openNewTab(blob: Blob | string) {
   const data = 'data:text/plain;charset=utf-8,' + encodeURIComponent(blob);
   window.open(data, '_blank');
   setTimeout(() => window.URL.revokeObjectURL(data), 100);
}

Ich versuche, eine Blob-Datei (in diesem Beispiel ist es ein String) in einem neuen Tab als HTML-Inhalt zu öffnen. Diese Funktion funktioniert zwar, aber sie öffnet den Inhalt als reinen Text und die Tags werden einfach wie „<html><head><title>....“ als Text geschrieben. Ich möchte den HTML-Inhalt anzeigen. Ich habe versucht, die Daten als text/html zu definieren, aber es funktioniert nicht. Wie kann ich das machen, ohne eine Bibliothek zu verwenden? Ich habe auch versucht, ein Anker-Tag so zu verwenden;

   const anchorElement = document.createElement('a');
   document.body.appendChild(anchorElement);
   anchorElement.setAttribute('href', data);
   anchorElement.setAttribute('target', '_blank');
   anchorElement.click();

Es hat das gleiche Ergebnis wie window.open().

Antwort #1

Du sagst dem Browser, dass der Inhalt text/plain ist - deshalb wird er nur als Text behandelt. Ändere es zu text/html und es sollte funktionieren.

Alternativ können Sie den Inhalt des geöffneten Fensters mit window.document.write() festlegen.

document.querySelector("#someButton").onclick = function() {
  let child = window.open("about:blank","myChild");
  child.document.write(`<html>
    <head><title>Hi mum!</title></head>
    <body><p>Hello World</p></body>
   </html>`);
  child.document.close();
}

Funktionierende Geige.

Antwort #2

Sie könnten es erreichen, indem Sie die Schreibfunktion des Fenstersdokuments wie folgt verwenden:

public openNewTab(blob: Blob | string) {
   const data = 'data:text/plain;charset=utf-8,' + encodeURIComponent(blob);
   var myWindow = window.open("", '_blank');
   myWindow.document.write(data);
   setTimeout(() => window.URL.revokeObjectURL(data), 100);
}

Weitere Details finden Sie unter https://www.w3schools.com/jsref/met_win_open.asp.

Verwandte Artikel