DOMParser忽略strong标签，如何保留HTML标签转换HTML为文本？

看起来你踩了textContent的常见坑——这个属性的设计就是专门提取DOM元素里的纯文本内容，会自动剥离所有HTML标签，所以才会把<strong>这类标签丢掉。

要得到包含HTML标签的结果，只需要把dom.body.textContent换成dom.body.innerHTML就可以了：innerHTML会返回元素内的完整HTML代码，包括所有标签结构。

修改后的代码 #

handleClick() {
  var data = [{Text1:"<strong>Strong text</strong>"}]
  var encodedStr = data[0].Text1
  var parser = new DOMParser();
  var dom = parser.parseFromString(encodedStr, 'text/html');
  // 替换为innerHTML获取带标签的内容
  var decodedString = dom.body.innerHTML; 
  console.log(decodedString); // 现在会输出 "<strong>Strong text</strong>"

  var docDefinition = {
    content: [{
      text: decodedString,
      fontSize: 9,
      alignment: 'justify',
      margin: [5, 2, 10, 20]
    }],
    pageOrientation: 'portrait',
    pageSize: 'A4'
  };

  pdfMake.createPdf(docDefinition).download('optionalName.pdf');
  console.log(this.decodedString)
}

额外提醒 #

如果你的最终目的是让PDF里的文本显示为加粗样式（而不是把<strong>标签作为文本内容展示），那上面的方法还不够——因为pdfMake的text属性并不直接支持HTML语法。这时候你有两个选择：

• 手动解析HTML标签，把内容转换成pdfMake支持的富文本格式（比如给需要加粗的文本添加bold: true属性）
• 使用专门的转换库（比如pdfmake-html）来自动把HTML转换成pdfMake能识别的结构

不过如果只是想保留标签作为文本内容显示，那上面的代码修改就完全能满足需求了。

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