引用参考文件、法律文件或技术文档中的具体内容时，通常需要同时指明页码与行号。行号由 Word 按页或按节自动编号，不需要在正文中手工输入；起始编号、行号间隔、行号与正文的距离以及重新编号的方式，都可以在页面设置中调整。纸张大小、纸张方向与页边距则决定页面上可用于排版的区域，在文档交付打印或按固定版式归档时同样需要统一设置。

本文用 Spire.Doc for JavaScript 在浏览器中完成上述页面设置。文档通过虚拟文件系统（VFS）加载，设置完成后保存并直接下载，整个过程基于 WebAssembly 在浏览器端运行，无需安装 Office，也不依赖后端服务。

本文介绍三个功能点：

• 为 Word 文档添加行号
• 设置 Word 纸张大小与纸张方向
• 设置 Word 页边距

有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript。下面的示例假定 Spire.Doc 已安装、WebAssembly 模块已初始化。

为 Word 文档添加行号

为 Word 文档添加行号时，行号由节的页面设置控制，通过 PageSetup 上的四个属性共同确定编号效果：

示例文档为 A4 纵向，页边距为上下 2.19 厘米、左右 3.17 厘米，且未启用行号。下面的代码将起始编号设为 1、每隔 1 行编号一次、行号距正文 40 磅，并在整节内连续编号。

具体操作步骤如下：

1. 获取 Spire.Doc 的 WASM 模块，确认已就绪。
2. 载入字体，把示例文档读入 VFS 并加载为 Document。
3. 取第一个节，通过 PageSetup 设置行号的起始编号、间隔、距离与编号模式。
4. 使用 SaveToFile() 保存结果文件。
5. 从 VFS 读出结果文件并触发浏览器下载。

为 Word 文档添加行号的代码如下：

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

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

    // 载入待处理的文档
    await window.spire.FetchFileToVFS('Sample.docx', '', `${process.env.PUBLIC_URL}/data/`);

    // 创建 Document 实例并加载文档
    const doc = new wasmModule.Document();
    doc.LoadFromFile('Sample.docx');

    // 行号按节生效，这里取第一个节的页面设置
    const pageSetup = doc.Sections.get_Item(0).PageSetup;

    // 设置行号起始编号
    pageSetup.LineNumberingStartValue = 1;

    // 设置行号间隔：每隔 1 行显示一个行号
    pageSetup.LineNumberingStep = 1;

    // 设置行号与正文的距离，单位为磅
    pageSetup.LineNumberingDistanceFromText = 40;

    // 设置编号模式为整节连续编号
    pageSetup.LineNumberingRestartMode = wasmModule.LineNumberingRestartMode.Continuous;

    // 保存结果文件
    const outputFileName = 'AddLineNumbers.docx';
    doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { 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={addLineNumbers}>
        添加行号
      </button>
    </div>
  );
}

export default App;

为 Word 文档添加行号后的页面：

行号的重新编号方式

LineNumberingRestartMode 决定行号在何处重新计数，可选值如下：

若希望每页都从起始编号重新计数，将编号模式改为 RestartPage 即可：

// 每页从起始编号重新计数
pageSetup.LineNumberingRestartMode = wasmModule.LineNumberingRestartMode.RestartPage;

设置 Word 纸张大小与纸张方向

设置 Word 纸张大小与纸张方向时，需要调用节页面设置中的 PageSize 与 Orientation 属性。PageSize 接受一个尺寸对象，Spire.Doc for JavaScript 内置了一组常见的预定义纸张，在 JavaScript 绑定中以静态方法的形式返回对应尺寸：

纸张方向由 PageOrientation 枚举指定，Portrait 为纵向，Landscape 为横向。下面的代码将示例文档的纸张大小设置为信纸，并把纸张方向改为横向。

具体操作步骤如下：

1. 获取 Spire.Doc 的 WASM 模块，确认已就绪。
2. 载入字体，把示例文档读入 VFS 并加载为 Document。
3. 取第一个节，通过 PageSetup 设置纸张大小与纸张方向。
4. 使用 SaveToFile() 保存结果文件。
5. 从 VFS 读出结果文件并触发浏览器下载。

设置 Word 纸张大小与纸张方向的代码如下：

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

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

    // 载入待处理的文档
    await window.spire.FetchFileToVFS('Sample.docx', '', `${process.env.PUBLIC_URL}/data/`);

    // 创建 Document 实例并加载文档
    const doc = new wasmModule.Document();
    doc.LoadFromFile('Sample.docx');

    // 纸张大小同样按节生效，这里取第一个节的页面设置
    const pageSetup = doc.Sections.get_Item(0).PageSetup;

    // 设置纸张大小为信纸；JavaScript 绑定中通过方法调用取得尺寸对象
    pageSetup.PageSize = wasmModule.PageSize.Letter();

    // 设置纸张方向为横向
    pageSetup.Orientation = wasmModule.PageOrientation.Landscape;

    // 保存结果文件
    const outputFileName = 'SetPaperSize.docx';
    doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { 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={setPaperSize}>
        设置纸张大小
      </button>
    </div>
  );
}

export default App;

设置为信纸并改为横向后的页面：

设置 Word 页边距

设置 Word 页边距时，通过 PageSetup.Margins 分别指定上、下、左、右四个方向的数值。这些数值的单位均为磅（point），1 厘米约等于 28.35 磅，常见取值换算如下：

示例文档原页边距为上下 2.19 厘米、左右 3.17 厘米。下面的代码将上下页边距调整为 3 厘米、左右页边距调整为 4.5 厘米，页面上可用于排版的区域随之收窄。

具体操作步骤如下：

1. 获取 Spire.Doc 的 WASM 模块，确认已就绪。
2. 载入字体，把示例文档读入 VFS 并加载为 Document。
3. 取第一个节，通过 PageSetup.Margins 设置四个方向的页边距。
4. 使用 SaveToFile() 保存结果文件。
5. 从 VFS 读出结果文件并触发浏览器下载。

设置 Word 页边距的代码如下：

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

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

    // 载入待处理的文档
    await window.spire.FetchFileToVFS('Sample.docx', '', `${process.env.PUBLIC_URL}/data/`);

    // 创建 Document 实例并加载文档
    const doc = new wasmModule.Document();
    doc.LoadFromFile('Sample.docx');

    // 页边距按节生效，这里取第一个节的页面设置
    const pageSetup = doc.Sections.get_Item(0).PageSetup;

    // 设置四个方向的页边距，单位为磅
    pageSetup.Margins.Top = 85;      // 约 3 厘米
    pageSetup.Margins.Bottom = 85;   // 约 3 厘米
    pageSetup.Margins.Left = 127.5;  // 约 4.5 厘米
    pageSetup.Margins.Right = 127.5; // 约 4.5 厘米

    // 保存结果文件
    const outputFileName = 'SetPageMargins.docx';
    doc.SaveToFile({ fileName: outputFileName, fileFormat: wasmModule.FileFormat.Docx2013 });
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { 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={setPageMargins}>
        设置页边距
      </button>
    </div>
  );
}

export default App;

调整四个方向页边距后的页面：

常见问题

添加行号后，为什么在文档中看不到行号

行号属于节的页面设置，通常在 Word 的页面视图（打印布局）中显示，阅读视图与 Web 版界面可能不显示行号。若已切换到页面视图仍然看不到，需要检查代码修改的是否为正文所在的节：行号按节保存，多节文档只设置第一个节时，其余节不会出现行号。

设置了起始编号，行号为什么还是从 1 开始

行号按节保存，起始编号也只对赋值所在的节生效。示例中取的是第一个节，若正文位于其他节，需要改为对应的节再赋值。LineNumberingStartValue 的默认值为 1，未赋值时自然从 1 开始；将其设为 5 后，该节的第一行显示 5，后续行在此基础上递增。

页边距的单位是什么，为什么设置为 2.54 后并不是 2.54 厘米

PageSetup.Margins 的数值单位是磅（point），Word 界面中则以厘米或英寸显示。1 厘米约等于 28.35 磅，2.54 厘米约等于 72 磅；按厘米排版时，可先换算再赋值。

修改纸张大小或纸张方向后，原有内容的排版为什么会变化

纸张尺寸变化后，页面可用的宽度与高度随之改变，正文会按新宽度重新折行，表格与图片也可能被压缩或移位。切换为横向时，宽度与高度互换，纵向排版的表格更容易出现跨页。需要保留原排版时，可先确认受影响的节，再决定是否调整字号或表格列宽。

JavaScript 中为什么写成 PageSize.Letter()，而不是直接使用 PageSize.Letter

JavaScript 绑定将预定义纸张暴露为静态方法，调用后才返回可作为 PageSetup.PageSize 赋值的尺寸对象。PageSize.Letter 本身是函数，直接赋值无法取得纸张尺寸，因此需要带上括号调用。

获取免费许可证

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