装订线是页面为装订预留的额外留白，用于文档打印装订成册时避免正文被订书钉或胶装边遮挡。由于它属于页面设置的一部分，必须在生成文档时确定，无法在打印环节补上。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成页面设置，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

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

• 添加装订线
• 设置装订线位置

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

添加装订线

添加装订线的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文档载入 WASM 虚拟文件系统；然后实例化 Document 加载文档，获取目标节后通过 PageSetup.Gutter 设置装订线宽度，该值以磅为单位，默认加在页面左侧；最后从 VFS 读取保存后的文件，封装为 Blob 后生成下载链接。

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

    // 将目标 Word 文档载入 VFS
    const inputFileName = "GutterSample.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);

    // 设置装订线宽度，单位为磅，默认作用于页面左侧
    section.PageSetup.Gutter = 100;

    // 定义输出文件名
    const outputFileName = "AddGutter_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>添加装订线</h1>
      <button onClick={AddGutter}>开始</button>
    </div>
  );
}
export default App;

添加装订线后生成的文档效果

设置装订线位置

装订线位置决定这段留白加在页面的哪一侧：PageSetup.IsTopGutter 为 true 时表示顶部装订线，为 false（默认值）时表示左侧装订线。核心流程同样分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Word 文档载入 WASM 虚拟文件系统；然后实例化 Document 加载文档，获取目标节后将 PageSetup.IsTopGutter 设为 true 打开顶部装订线，再通过 PageSetup.Gutter 设置装订线宽度；最后从 VFS 读取保存后的文件，封装为 Blob 后生成下载链接。

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

    // 将目标 Word 文档载入 VFS
    const inputFileName = "GutterSample.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);

    // 将装订线位置设为顶部
    section.PageSetup.IsTopGutter = true;

    // 设置装订线宽度，单位为磅
    section.PageSetup.Gutter = 100;

    // 定义输出文件名
    const outputFileName = "SetGutterPosition_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={SetGutterPosition}>开始</button>
    </div>
  );
}
export default App;

设置顶部装订线后生成的文档效果

常见问题

装订线宽度与 Word 界面显示的数值不一致

原因：PageSetup.Gutter 的单位是磅（point），而 Word 页面设置对话框中默认以厘米或英寸显示。示例中直接传入 100，代表 100 磅，约合 3.53 厘米，在 A4 页面上会明显偏宽。

解决：按单位换算后再传入。1 磅等于 1/72 英寸，1 英寸等于 2.54 厘米，因此厘米转磅的公式为 磅 = 厘米 ÷ 2.54 × 72：

// 将 1.5 厘米的装订线宽度换算为磅
const gutterInPoints = (1.5 / 2.54) * 72;
section.PageSetup.Gutter = gutterInPoints;

设置装订线后正文可用宽度过窄

原因：装订线是在页边距之外额外占用的空间，它不会自动扩大页面纸面，而是把正文区域向内压缩。若原有页边距已经较大，再加上装订线后正文可用宽度会进一步缩小，出现每行字数过少、段落频繁折行的情况。

解决：在设置装订线的同时，相应调小同一侧的页边距，保证正文可用宽度：

const pageSetup = section.PageSetup;

// 设置 1.5 厘米的装订线（厘米换算为磅）
pageSetup.Gutter = (1.5 / 2.54) * 72;

// 装订线占用左侧空间，相应调小左边距
pageSetup.Margins.Left = 60;

获取免费许可证

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