如何将 XML 映射到 ReactJS+Typescript 项目中的对象列表

Question

有一个 xml 字符串，我只需要编写一个辅助函数来将此 xml 映射到下面的对象列表；

export interface WordItems {
  title: string;
  isOfficeInitialized: boolean;
  wSpacing: string;
  wFonts: string;
  wLang: string;
  wSz: number; // will get value from w:val element in xml string
}

const App: React.FC<WordItems> = () => {
  const parsedParagraph = helperParseFunction(XML_String);

  // Get run elements in this paragraph. "w:r" is the tagname for runs
  const runs = parsedParagraph.documentElement.getElementsByTagName("w:r");
  let textContent = "";
  // @ts-ignore
  runs.forEach((run) => (textContent += run.textContent));
  React.useEffect(() => {}, []);

  return (
    <Stack tokens={{ childrenGap: 32 }}>
    ...
    </Stack>
  );
};

export default App;

XML 字符串；

<pkg:part pkg:name="/word/document.xml" pkg:contentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml">
    <pkg:xmlData>
      <w:document xmlns:w16se="http://schemas.microsoft.com/office/word/2015/wordml/symex" xmlns:wne="http://schemas.microsoft.com/office/word/2006/wordml" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" xmlns:wp14="http://schemas.microsoft.com/office/word/2010/wordprocessingDrawing" xmlns:wpc="http://schemas.microsoft.com/office/word/2010/wordprocessingCanvas" xmlns:wpg="http://schemas.microsoft.com/office/word/2010/wordprocessingGroup" xmlns:wpi="http://schemas.microsoft.com/office/word/2010/wordprocessingInk" xmlns:wps="http://schemas.microsoft.com/office/word/2010/wordprocessingShape" mc:Ignorable="w14 w15 w16se w16cid w16 w16cex w16sdtdh wp14">
        <w:body>
          <w:p w:rsidR="006B7198" w:rsidRPr="00A36BF1" w:rsidRDefault="006B7198" w:rsidP="00A36BF1">
            <w:pPr>
              <w:spacing w:after="220" />
              <w:ind w:left="720" />
              <w:jc w:val="both" />
              <w:rPr>
                <w:rFonts w:ascii="Times New Roman" w:eastAsia="Malgun Gothic" w:hAnsi="Times New Roman" w:cs="Times New Roman" />
                <w:sz w:val="22" />
                <w:lang w:val="en-GB" />
              </w:rPr>
            </w:pPr>
            <w:r w:rsidRPr="00A36BF1">
              <w:rPr>
                <w:rFonts w:ascii="Times New Roman" w:eastAsia="Malgun Gothic" w:hAnsi="Times New Roman" w:cs="Times New Roman" />
                <w:sz w:val="22" />
                <w:lang w:val="en-GB" />
              </w:rPr>
              <w:t>“</w:t>
            </w:r>
            <w:r w:rsidRPr="00A36BF1">
              <w:rPr>
                <w:rFonts w:ascii="Times New Roman" w:eastAsia="Malgun Gothic" w:hAnsi="Times New Roman" w:cs="Times New Roman" />
                <w:b />
                <w:spacing w:val="-2" />
                <w:sz w:val="22" />
                <w:lang w:val="en-GB" />
              </w:rPr>
              <w:t>Finance Agreements</w:t>
            </w:r>
            <w:r w:rsidRPr="00A36BF1">
              <w:rPr>
                <w:rFonts w:ascii="Times New Roman" w:eastAsia="Malgun Gothic" w:hAnsi="Times New Roman" w:cs="Times New Roman" />
                <w:sz w:val="22" />
                <w:lang w:val="en-GB" />
              </w:rPr>
              <w:t xml:space="preserve">” </w:t>
            </w:r>
            <w:r w:rsidRPr="00A36BF1">
              <w:rPr>
                <w:rFonts w:ascii="Times New Roman" w:eastAsia="Malgun Gothic" w:hAnsi="Times New Roman" w:cs="Times New Roman" />
                <w:spacing w:val="-2" />
                <w:sz w:val="22" />
                <w:lang w:val="en-GB" />
              </w:rPr>
              <w:t xml:space="preserve">means </w:t>
            </w:r>
            <w:r w:rsidRPr="00A36BF1">
              <w:rPr>
                <w:rFonts w:ascii="Times New Roman" w:eastAsia="Malgun Gothic" w:hAnsi="Times New Roman" w:cs="Times New Roman" />
                <w:sz w:val="22" />
                <w:lang w:val="en-GB" />
              </w:rPr>
              <w:t>any loan or credit agreements, security agreements, shareholders undertakings and other related agreements and documents relating to the financing for the complete development and construction of the Project by financial institutions and/or other Third Parties for such amounts as may be agreed between the Company and the lenders;</w:t>
            </w:r>
          </w:p>
          <w:p w:rsidR="00000000" w:rsidRDefault="006B7198" />
          <w:sectPr w:rsidR="00000000">
            <w:pgSz w:w="12240" w:h="15840" />
            <w:pgMar w:top="1440" w:right="1440" w:bottom="1440" w:left="1440" w:header="720" w:footer="720" w:gutter="0" />
            <w:cols w:space="720" />
          </w:sectPr>
        </w:body>
      </w:document>
    </pkg:xmlData>
  </pkg:part>

helperParseFunction 应该是什么样的？

Answer 1

有许多库可将 XML 文件转换为对象，但您可以写下您的解析器。

最好的之一是 x2js:

This library provides XML to JSON (JavaScript Objects) and vice versa javascript conversion functions. The library is very small and has no dependencies.

您还可以检查结果与在线转换器如Code Beautify and convertJosn

如何将 XML 映射到 ReactJS+Typescript 项目中的对象列表

How to map XML to List of objects in ReactJS+Typescript project

office-addins

reactjs