如何使用Mammoth在浏览器中将Word文档XML代码片段转换为HTML？

你遇到这个报错其实很好理解——Mammoth的convertToHtml方法天生是用来处理完整的.docx文件的，而docx本质是个ZIP压缩包，里面包含了一套标准的OOXML格式文件。你现在传入的只是单个Word段落的XML片段，根本不是合法的ZIP文件，所以它才会报错说找不到ZIP的中央目录。

要搞定这个问题，咱们得把你的XML片段包装成一个最小的合法.docx结构，再传给Mammoth。下面是具体的实现步骤和代码：

具体解决方案 #

1. 先引入JSZip库（用来在浏览器里生成ZIP格式的docx文件），你可以通过CDN引入或者npm安装。
2. 构造docx必须的几个核心文件，把你的段落片段嵌入到主文档里。
3. 用JSZip把这些文件打包成ZIP，生成ArrayBuffer后再传给Mammoth处理。

完整代码示例 #

import mammoth from 'mammoth';
import JSZip from 'jszip';

async function convertWordSnippetToHtml(xmlSnippet) {
  // 1. 构造docx包必须的核心配置文件
  const contentTypes = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
  <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>
  <Default Extension="xml" ContentType="application/xml"/>
  <Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/>
</Types>`;

  const rels = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
  <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/>
</Relationships>`;

  // 把你的段落片段放到主文档的body标签内
  const documentXml = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
  <w:body>
    ${xmlSnippet}
    <!-- 加上默认的节设置，保证docx结构合法 -->
    <w:sectPr>
      <w:pgSz w:w="11906" w:h="16838"/>
      <w:pgMar w:top="1417" w:right="1417" w:bottom="1417" w:left="1417" w:header="708" w:footer="708" w:gutter="0"/>
    </w:sectPr>
  </w:body>
</w:document>`;

  // 2. 用JSZip打包成docx格式的ZIP包
  const zip = new JSZip();
  zip.file('[Content_Types].xml', contentTypes);
  zip.folder('_rels').file('.rels', rels);
  zip.folder('word').file('document.xml', documentXml);

  // 3. 生成ArrayBuffer并传给Mammoth转换
  const arrayBuffer = await zip.generateAsync({ type: 'arraybuffer' });
  const conversionResult = await mammoth.convertToHtml({ arrayBuffer });
  
  return conversionResult.value;
}

// 调用示例
const yourXmlSnippet = `
<w:p xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" xmlns:w14="http://schemas.microsoft.com/office/word/2010/wordml" w14:paraId="5A36C390" w14:textId="77777777" w:rsidR="00B709F1" w:rsidRDefault="00FE05EA" w:rsidP="00056A13">
  <w:pPr>
    <w:keepNext/>
    <w:tabs>
      <w:tab w:val="left" w:pos="1985"/>
    </w:tabs>
    <w:spacing w:after="330" w:line="220" w:lineRule="auto"/>
    <w:jc w:val="center"/>
  </w:pPr>
  <w:r>
    <w:rPr>
      <w:rFonts w:ascii="Cambria" w:hAnsi="Cambria"/>
      <w:b/>
    </w:rPr>
    <w:t>Proof</w:t>
  </w:r>
</w:p>
`;

convertWordSnippetToHtml(yourXmlSnippet)
  .then(html => {
    console.log('转换后的HTML：', html);
    // 插入到页面中渲染（需要页面上有id为render-target的元素）
    const target = document.getElementById('render-target');
    if (target) target.innerHTML = html;
  })
  .catch(error => {
    console.error('转换失败：', error);
  });

额外说明 #

• 转换后的HTML会自动保留原段落的格式：比如居中对齐、加粗字体、行间距设置等，对应生成带样式的<p>和<strong>标签。
• 如果你不想引入JSZip，其实没有更简便的方法——因为Mammoth没有提供直接解析单个XML片段的API，它的核心逻辑就是基于完整的docx包设计的。

备注：内容来源于stack exchange，提问作者rahulthewall