在 Word 文档中插入分页符，是控制章节起始位置、避免标题与正文被跨页割裂时最常用的排版手段；而清理文档中冗余的分页符，则是处理从其他文档复制内容后遗留空白页的关键步骤。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成这些操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

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

• 插入分页符
• 删除分页符

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

插入分页符

插入分页符的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文档载入 WASM 虚拟文件系统；然后实例化 Document 加载文档，定位到目标段落并调用 AppendBreak 传入 BreakType.PageBreak，将分页符作为该段落的子对象追加到末尾；最后从 VFS 读取保存后的文件，封装为 Blob 后生成下载链接。

function App() {
  const InsertPageBreak = async () => {
    const docModule = window.wasmModule?.spiredoc;
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将目标 Word 文档载入 VFS
    const inputFileName = "Template_Docx_1.docx";
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);

    // 创建 Document 实例并加载文档
    const doc = new docModule.Document();
    doc.LoadFromFile(inputFileName);

    // 定位到第一节的第 4 个段落，在其末尾插入分页符
    doc.Sections.get_Item(0).Paragraphs.get_Item(3).AppendBreak(docModule.BreakType.PageBreak);

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

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

    doc.Dispose();

    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={InsertPageBreak}>开始</button>
    </div>
  );
}
export default App;

插入分页符后生成的文档效果

删除分页符

删除分页符的核心流程同样分为三个阶段：首先通过 FetchFileToVFS 将字体文件和包含分页符的 Word 文档载入 WASM 虚拟文件系统；然后实例化 Document 加载文档，依次遍历每一节中每一个段落的子对象，通过 DocumentObjectType 判断该对象是否为分页符，并用 ChildObjects.Remove 将其移除；最后从 VFS 读取保存后的文件，封装为 Blob 后生成下载链接。

function App() {
  const RemovePageBreaks = async () => {
    const docModule = window.wasmModule?.spiredoc;
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将目标 Word 文档载入 VFS
    const inputFileName = "Template_Docx_4.docx";
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}static/data/`);

    // 创建 Document 实例并加载文档
    const doc = new docModule.Document();
    doc.LoadFromFile(inputFileName);

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

    // 遍历节中的每一个段落
    for (let j = 0; j < section.Paragraphs.Count; j++) {
        const p = section.Paragraphs.get_Item(j);

        // 倒序遍历段落的子对象，避免移除元素后索引错位
        for (let i = p.ChildObjects.Count - 1; i >= 0; i--) {
            const obj = p.ChildObjects.get_Item(i);

            // 判断对象是否为分页符
            if (obj.DocumentObjectType == docModule.DocumentObjectType.Break
                && obj.BreakType == docModule.BreakType.PageBreak) {
                // 将分页符从段落中移除
                p.ChildObjects.Remove(obj);
            }
        }
    }

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

    // 将文档保存到 VFS
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });
    doc.Dispose();

    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={RemovePageBreaks}>开始</button>
    </div>
  );
}
export default App;

删除分页符后生成的文档效果

常见问题

插入分页符后新页顶部出现多余空行

原因：AppendBreak 是把分页符追加到目标段落的末尾，因此该段落自身的段后间距会随分页符一起被带到新页的开头，视觉上表现为新页顶部多出一段空白。若段落启用了自动间距，这段空白的高度还会随字体大小变化。

解决：插入分页符前先清除目标段落的段后间距：

const para = document.Sections.get_Item(0).Paragraphs.get_Item(3);

// 关闭自动段后间距，并将段后间距设为 0
para.Format.AfterAutoSpacing = false;
para.Format.AfterSpacing = 0;

// 再插入分页符
para.AppendBreak(wasmModule.BreakType.PageBreak);

删除分页符后文档仍然分页

原因：文档中的分页效果并不都由分页符对象产生。若段落本身设置了「段前分页」属性，即使分页符已被移除，该段落仍会从新的一页开始，只遍历 ChildObjects 删除 DocumentObjectType.Break 对象无法去除这类分页。

解决：在删除分页符对象的同时，重置段落的段前分页属性：

const section = document.Sections.get_Item(0);

for (let j = 0; j < section.Paragraphs.Count; j++) {
  const p = section.Paragraphs.get_Item(j);

  // 清除段落自带的「段前分页」属性
  if (p.Format.PageBreakBefore) {
    p.Format.PageBreakBefore = false;
  }
}

获取免费许可证

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