邮件格式的html、xml渲染问题、以及对DOMParser的理解

boy_hhx

于 2024-12-09 11:22:36 发布

阅读量322

点赞数 3

文章标签： html xml 前端

本文链接：https://blog.csdn.net/boy_hhx/article/details/144341046

版权

有个需求要求把邮件内容渲染到页面中，后端从Microsoft Outlook文档导出或生成的一段html代码，要把这段代码以邮件里面的格式展示出来可以这样渲染

使用DOMParser解析html/xml
解析出的document获取根元素
获取你想要渲染的元素
通过设置element.interHTML 和outerHTML 属性的值，将部分 DOM 替换为从 HTML 构建的新 DOM 树。

const Xml = (xmlString) => {
   
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlString, "text/html");
    const bodyElement = xmlDoc.getElementsByTagName("body")[0];
    const emailContent = window.document.getElementById("emailContent");
    if (bodyElement) {
      const firstDiv = bodyElement.getElementsByTagName("div")[0];
      console.log(firstDiv);
      if (firstDiv) {
        emailContent.innerHTML = firstDiv.innerHTML;
        // return firstDiv; map渲染直接导出不会有想要结果,要用map渲染可以加一个setTimeout
      }
    } else {
      console.log("No <body> element found.");
    }
  };

对DOMParser的理解

DOMParser可以将储存在字符串中的XMLh或html源代码解析为一个DOMdocument

语法

    const parser = new DOMParser();

方法

const xmlDoc = parser.parseFromString(String,mineType);

返回值

根据mineType参数,返回Document或者XMLDocument或者其它文档类型

参数

string

要解析的DOMstring。必须包含HTML、xml、xhtml+xml 或svg

mineType

text/html:返回Document

text/xml:返回XMLDocument

application/xml:返回XMLDocument

application/xhtml+xml:返回XMLDocument

image/svg+xml:返回XMLDocument

错误处理

如果解析失败，DOMParser 不会抛出任何异常，而是会返回一个给定的错误文档：

<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
(error description)
<sourcetext>(a snippet of the source XML)</sourcetext>
</parsererror>