如何实现点击a链接在新标签页打开HTML字符串渲染的页面

你当前的实现存在3个核心错误，导致无法正常跳转：

• stringToHtml返回的是HTMLBodyElement类型的DOM对象，直接插入字符串模板时会被自动转换为[object HTMLBodyElement]字符串，不属于浏览器可识别的合法URL格式
• a标签的href属性仅支持合法URL值，无法直接接收DOM节点作为跳转目标
• 现有stringToHtml仅返回解析后的body节点，丢失了原始HTML中head内的title、meta标签等配置，就算能正常跳转也无法还原完整页面结构

这个场景不需要使用DOMParser解析HTML，直接将完整HTML字符串编码为data:text/html类型的Data URL即可：浏览器识别到该类型URL时，会直接解码URL内的HTML内容并渲染为独立页面，完全保留原始模板的所有结构和配置。
修正后的代码如下：

function generateLink(myHtmlTemplate: string, text: string){
  // 对完整HTML做URL编码，生成可直接访问的Data URL
  const pageUrl = `data:text/html;charset=utf-8,${encodeURIComponent(myHtmlTemplate)}`
  // 增加rel属性规避target="_blank"带来的安全风险
  return `<a href="${pageUrl}" target="_blank" rel="noopener noreferrer">${text}</a>`
}

实现说明：encodeURIComponent会自动转义HTML内的引号、特殊符号，既不会出现HTML属性拼接时的语法错误，也能保证所有页面内容被完整编码。原有stringToHtml工具函数在本场景下无作用，可以直接移除。

内容的提问来源于stack exchange，提问作者Rodrigo_devs