如何在新选项卡中将字符串作为 HTML 内容打开？

Question

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()的结果相同。

Answer 1

您可以使用 window 文档的写入功能实现它，如下所示：

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 找到更多详细信息。

Answer 2

您是在告诉浏览器内容是 text/plain - 这就是它仅作为文本处理的原因。将其更改为 text/html，它应该可以工作。

作为替代方案，您可以将打开的 window 的内容设置为 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();
}

Working fiddle.

如何在新选项卡中将字符串作为 HTML 内容打开？

How to open a string as a HTML content in a new tab?

html

javascript

data-uri

typescript