在实际的文档开发流程中，页眉页脚的维护操作与添加同样重要——从模板文档复制页眉页脚到新文档实现快速复用、移除旧页眉页脚进行文档清理、锁定页眉防止内容被篡改，这些都是日常工作中频繁遇到的需求。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成 Word 文档的处理，通过虚拟文件系统（VFS）管理字体和文件资源，无需后端服务支持。

本文介绍三个核心功能点：

• 复制页眉页脚
• 移除页眉和页脚
• 锁定页眉禁止编辑

有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。

复制页眉页脚

在企业文档生产中，通常有一个标准模板文档定义了统一的页眉（公司 Logo + 文档标题）和页脚（页码 + 版权声明）。当创建新文档时，需要将模板中的页眉页脚复制过来，以保持企业文档风格的一致性。Spire.Doc 通过 ChildObjects 集合和 Clone 方法实现页眉对象的跨文档复制。核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和两个 Word 文件（源文档和目标文档）载入 WASM 虚拟文件系统；然后分别实例化两个 Document，从源文档获取页眉的子对象集合，遍历并克隆到目标文档各节的页眉中；最后将目标文档保存并从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。

function App() {
  const CopyHeaderAndFooter = async () => {
    // 获取 Spire.Doc WASM 模块
    const wasmModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!wasmModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将源文件和目标文件载入 VFS
    let inputFileName = "HeaderAndFooter.docx";
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);
    const inputFileName_1 = "Template.docx";
    await window.spire.FetchFileToVFS(inputFileName_1, "", `${process.env.PUBLIC_URL}/data/`);

    // 加载源文档
    let doc1 = new wasmModule.Document();
    doc1.LoadFromFile(inputFileName);

    // 获取源文档的页眉
    let header = doc1.Sections.get_Item(0).HeadersFooters.Header;

    // 加载目标文档
    let doc2 = new wasmModule.Document();
    doc2.LoadFromFile(inputFileName_1);

    // 将源文档页眉中的每个子对象克隆到目标文档的所有节
    for (let i = 0; i < doc2.Sections.Count; i++) {
      let section = doc2.Sections.get_Item(i);
      for (let j = 0; j < header.ChildObjects.Count; j++) {
        let obj = header.ChildObjects.get_Item(j);
        section.HeadersFooters.Header.ChildObjects.Add(obj.Clone());
      }
    }

    // 定义输出文件名
    const outputFileName = "CopyHeaderAndFooter_output.docx";

    // 保存文档
    doc2.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });

    // 释放资源
    doc1.Close();
    doc2.Close();
    doc1.Dispose();
    doc2.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>单击以下按钮以复制页眉页脚到另一个 Word 文档。</h1>
      <button onClick={CopyHeaderAndFooter}>
        Generate
      </button>
    </div>
  );
}

export default App;

上述代码将源文档中已有的页眉内容克隆到目标文档的所有节中，生成的 Word 文档效果如下：

移除页眉和页脚

在文档清理或模板替换场景中，经常需要移除文档中现有的页眉或页脚。例如：接手他人文档需要重新设计页眉页脚时，先清空原有内容；或者从客户系统导出的文档包含默认页眉，需要移除后替换为企业模板。Spire.Doc 通过 HeadersFooters.get_Item 按类型获取首页、奇数页、偶数页的页眉或页脚对象，然后调用 ChildObjects.Clear() 清除其所有内容。

function App() {
  const RemoveHeaderFooter = async () => {
    // 获取 Spire.Doc WASM 模块
    const wasmModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!wasmModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将示例文件载入 VFS
    let inputFileName = "HeaderAndFooter.docx";
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 加载文档
    let doc = new wasmModule.Document();
    doc.LoadFromFile(inputFileName);

    // 获取第一个节
    let section = doc.Sections.get_Item(0);

    // 清除所有类型的页眉内容（首页、奇数页、偶数页）
    let header;
    header = section.HeadersFooters.get_Item({ hfType: wasmModule.HeaderFooterType.HeaderFirstPage });
    if (header != null)
      header.ChildObjects.Clear();

    header = section.HeadersFooters.get_Item({ hfType: wasmModule.HeaderFooterType.HeaderOdd });
    if (header != null)
      header.ChildObjects.Clear();

    header = section.HeadersFooters.get_Item({ hfType: wasmModule.HeaderFooterType.HeaderEven });
    if (header != null)
      header.ChildObjects.Clear();

    // 清除所有类型的页脚内容（首页、奇数页、偶数页）
    let footer;
    footer = section.HeadersFooters.get_Item({ hfType: wasmModule.HeaderFooterType.FooterFirstPage });
    if (footer != null)
      footer.ChildObjects.Clear();

    footer = section.HeadersFooters.get_Item({ hfType: wasmModule.HeaderFooterType.FooterOdd });
    if (footer != null)
      footer.ChildObjects.Clear();

    footer = section.HeadersFooters.get_Item({ hfType: wasmModule.HeaderFooterType.FooterEven });
    if (footer != null)
      footer.ChildObjects.Clear();
      
    // 定义输出文件名
    const outputFileName = "RemoveHeaderFooter_output.docx";

    // 保存文档
    doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });

    // 释放资源
    doc.Close();
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>单击以下按钮以移除 Word 文档中的页眉页脚。</h1>
      <button onClick={RemoveHeaderFooter}>
        Generate
      </button>
    </div>
  );
}

export default App;

移除页眉后的文档效果如下：

锁定页眉禁止编辑

在将文档分发给客户或团队成员时，通常希望页眉中的公司 Logo、文档编号等固定信息不被修改，同时允许正文区域正常编辑。Spire.Doc 通过文档保护功能实现这一点：将保护类型设置为 AllowOnlyFormFields，然后将节的 ProtectForm 属性设为 false，这样正文区域保持可编辑状态，而页眉区域则受到保护不可修改。

function App() {
  const LockHeader = async () => {
    // 获取 Spire.Doc WASM 模块
    const wasmModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!wasmModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将示例文件载入 VFS
    let inputFileName = "HeaderAndFooter.docx";
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

      // 加载文档
    let doc = new wasmModule.Document();
    doc.LoadFromFile(inputFileName);

    // 获取第一个节
    let section = doc.Sections.get_Item(0);

    // 保护文档，设置保护类型为 AllowOnlyFormFields
    doc.Protect({ type: wasmModule.ProtectionType.AllowOnlyFormFields, password: "123" });

    // 将节设置为可编辑，使正文区域不被锁定
    section.ProtectForm = false;

    // 定义输出文件名
    const outputFileName = "LockHeader_output.docx";

    // 保存文档
    doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });

    // 释放资源
    doc.Close();
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>单击以下按钮以锁定 Word 文档中的页眉。</h1>
      <button onClick={LockHeader}>
        Generate
      </button>
    </div>
  );
}

export default App;

页眉被锁定后，在 Word 中打开文档时页眉区域不可编辑，而正文区域可以正常修改，生成的 Word 文档效果如下：

常见问题

复制后页眉内容在目标文档中不显示

原因：目标文档包含多个节（Section），但复制操作只处理了第一节的页眉，其他节的页眉未被更新。

解决：遍历目标文档的所有节，将源页眉内容复制到每一节：

for (let i = 0; i < doc2.Sections.Count; i++) {
  let section = doc2.Sections.get_Item(i);
  for (let j = 0; j < header.ChildObjects.Count; j++) {
    let obj = header.ChildObjects.get_Item(j);
    section.HeadersFooters.Header.ChildObjects.Add(obj.Clone());
  }
}

锁定页眉后整个文档都无法编辑

原因：doc.Protect({ type: AllowOnlyFormFields }) 默认会锁定整个文档，包括正文区域。

解决：设置保护后，将节的 ProtectForm 属性设为 false，使正文区域保持可编辑状态：

doc.Protect({ type: wasmModule.ProtectionType.AllowOnlyFormFields, password: "123" });
section.ProtectForm = false;

移除页眉后页脚内容也被清空

原因：误将移除页眉的代码逻辑应用到页脚，或者使用了相同的 ChildObjects.Clear() 操作作用于了错误的对象。

解决：移除页眉和移除页脚使用不同的 HeaderFooterType 参数，确保操作的对象是正确的：

// 移除页眉时使用 Header 类型
section.HeadersFooters.get_Item({ hfType: wasmModule.HeaderFooterType.HeaderFirstPage });
// 移除页脚时使用 Footer 类型
section.HeadersFooters.get_Item({ hfType: wasmModule.HeaderFooterType.FooterFirstPage });

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。