javascript - 如何在新標籤頁中將字串作為 HTML 內容打開？

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);
}

我正在嘗試將 blob 文件（在這個例子中它是一個字串）以 HTML 內容的形式在新分頁中打開。這個函數可以正常工作，但它打開的是純文字內容，標籤只是像「<html><head><title>....」這樣作為文字顯示。我想要顯示 HTML 內容。我試過將資料定義為 text/html，但這沒有用。我該怎麼在不使用任何函式庫的情況下做到這一點？我也嘗試過像這樣使用錨點標籤；

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

它與 window.open() 的結果相同。

答案＃1

你告訴瀏覽器內容是 text/plain——這就是為什麼它只被作為文本處理。將其改為 text/html，它應該就能正常工作。

作為替代，您可以使用 window.document.write() 設置已開啟視窗的內容。

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();
}

可用的小提琴。

答案＃2

你可以使用視窗文件的 write 函數來達成它，如下所示：

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);
}

您可以在 https://www.w3schools.com/jsref/met_win_open.asp 找到更多細節。