如何通过Office JS API重新加载Word文档的页眉页脚

问题原因分析 #

你遇到的首次加载页眉页脚正常显示的情况，大概率是因为首次调用时文档处于全新状态，完整的OOXML会被Office自动解析并应用到整个文档（包括默认章节的页眉页脚）。但后续调用body.insertOoxml时，这个API确实只会操作正文区域，不会触发表头页脚的更新，所以旧的页眉页脚会保留。

你之前尝试直接用整个文档的OOXML插入页眉是错误的——整个文档的OOXML包含正文、样式、章节等完整结构，直接插入到页眉容器里会导致解析失败，自然看不到变化。

解决方案：提取OOXML中的页眉页脚片段并单独替换 #

要实现页眉页脚的更新，你需要从后端返回的完整OOXML中提取出页眉和页脚的专属OOXML片段，然后分别插入到对应章节的页眉页脚容器中。具体步骤如下：

1. 解析完整OOXML，提取页眉页脚片段
   使用浏览器的DOMParser解析返回的XML字符串，定位到页眉（w:hdr）和页脚（w:ftr）节点，提取它们的完整XML内容作为单独的OOXML片段。

2. 遍历文档所有章节，替换对应页眉页脚
   文档可能包含多个章节，每个章节又有三种页眉/页脚类型（primary、first、even），需要逐一处理，确保所有场景都覆盖。

完整代码示例 #

public someGetMethod(templateId: string): ng.IPromise<Template[]> {
  return this.Service.getXml(templateId)
    .then((fullDocumentXml: string) => {
      // 1. 解析完整OOXML，提取页眉页脚片段
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(fullDocumentXml, "application/xml");
      
      // 提取primary页眉的OOXML片段
      const primaryHeaderXml = extractOoxmlPart(xmlDoc, "w:hdr", "w:primary");
      // 提取primary页脚的OOXML片段
      const primaryFooterXml = extractOoxmlPart(xmlDoc, "w:ftr", "w:primary");
      // 可选：处理first/even类型的页眉页脚
      const firstHeaderXml = extractOoxmlPart(xmlDoc, "w:hdr", "w:first");
      const evenHeaderXml = extractOoxmlPart(xmlDoc, "w:hdr", "w:even");

      // 2. 执行Word操作，更新正文+页眉页脚
      return Word.run((context) => {
        // 更新正文
        const body = context.document.body;
        body.insertOoxml(fullDocumentXml, Word.InsertLocation.replace);

        // 获取所有章节并加载
        const sections = context.document.sections;
        context.load(sections, "items");

        return context.sync().then(() => {
          // 遍历每个章节
          sections.items.forEach(section => {
            // 更新primary页眉
            if (primaryHeaderXml) {
              const primaryHeader = section.getHeader("primary");
              primaryHeader.clear();
              primaryHeader.insertOoxml(primaryHeaderXml, Word.InsertLocation.start);
            }
            // 更新primary页脚
            if (primaryFooterXml) {
              const primaryFooter = section.getFooter("primary");
              primaryFooter.clear();
              primaryFooter.insertOoxml(primaryFooterXml, Word.InsertLocation.start);
            }
            // 可选：更新first页眉
            if (firstHeaderXml) {
              const firstHeader = section.getHeader("first");
              firstHeader.clear();
              firstHeader.insertOoxml(firstHeaderXml, Word.InsertLocation.start);
            }
            // 可选：更新even页眉
            if (evenHeaderXml) {
              const evenHeader = section.getHeader("even");
              evenHeader.clear();
              evenHeader.insertOoxml(evenHeaderXml, Word.InsertLocation.start);
            }
          });

          return context.sync();
        });
      }).catch((error: Error) => {
        console.error('Error: ' + JSON.stringify(error));
      });
    });
}

// 辅助函数：从完整OOXML中提取指定类型的页眉/页脚片段
function extractOoxmlPart(xmlDoc: Document, tagName: string, typeAttr: string): string | null {
  const xpath = `//${tagName}[@w:type='${typeAttr}']`;
  const nodes = xmlDoc.evaluate(xpath, xmlDoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
  const targetNode = nodes.singleNodeValue;
  
  if (!targetNode) return null;
  
  // 包装成完整的OOXML片段（需要包含命名空间等必要结构）
  return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<w:hdr xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
${targetNode.innerHTML}
</w:hdr>`;
}

关键注意点 #

• OOXML片段的完整性：提取的页眉/页脚必须是包含正确命名空间的完整XML片段，否则Office无法正确解析。
• 覆盖所有章节和类型：如果你的文档有多个章节，或者设置了“首页不同”“奇偶页不同”的页眉页脚，一定要对应处理first和even类型。
• 先清空再插入：插入新的OOXML前先调用clear()，避免旧内容残留导致格式混乱。

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