页边距决定正文与纸张边缘之间留多少空白。留白太小，内容贴着边、显得局促；留白太大，一页又装不下多少东西。已有的 PDF 往往版面已经定死——想加一圈留白，或者把多余的白边收掉，在排版软件里得一页页重排；等到文档由程序批量处理，边距还得跟着版式统一走。

本文介绍用 Spire.PDF for JavaScript 增大或减小 PDF 文档的页边距。它基于 WebAssembly 在浏览器端直接加载、修改与保存 PDF 文档，全过程在本地完成，通过虚拟文件系统（VFS）读写文件，无需后端配合。

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

• 增大 PDF 文档的页边距
• 减小 PDF 文档的页边距

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

增大 PDF 文档的页边距

增大页边距相当于给文档换一张更大的纸：用 CreateTemplate() 把每一页的内容取成模板，画到尺寸放大后的新页上，新页四边用 PdfMargins 预留出留白，内容本身大小不变，四周就多出一圈空白。

function App() {
  const increasePdfMargins = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

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

    // 将待调整的 PDF 文件载入 VFS
    const inputFileName = '示例文档.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 载入原文档，取第一页用于计算新页面尺寸
    const originalPdf = new pdfModule.PdfDocument();
    originalPdf.LoadFromFile(inputFileName);
    const firstPage = originalPdf.Pages.get_Item(0);

    // 每边增加 40 磅留白
    const marginsToAdd = new pdfModule.PdfMargins();
    marginsToAdd.Top = 40;
    marginsToAdd.Bottom = 40;
    marginsToAdd.Left = 40;
    marginsToAdd.Right = 40;

    // 新页面尺寸＝原尺寸＋四边页边距，内容区正好还是原来的大小
    const newSize = new pdfModule.SizeF({
      width: firstPage.Size.Width + marginsToAdd.Left + marginsToAdd.Right,
      height: firstPage.Size.Height + marginsToAdd.Top + marginsToAdd.Bottom,
    });

    // 逐页把原内容取成模板，画到带页边距的新页上
    const newPdf = new pdfModule.PdfDocument();
    for (let i = 0; i < originalPdf.Pages.Count; i++) {
      const template = originalPdf.Pages.get_Item(i).CreateTemplate();
      const page = newPdf.Pages.Add({ size: newSize, margins: marginsToAdd });
      page.Canvas.DrawTemplate({ template: template, location: new pdfModule.PointF(0, 0) });
    }

    const outputFileName = '增大页边距.pdf';
    newPdf.SaveToFile(outputFileName);
    newPdf.Close();
    originalPdf.Close();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    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>增大 PDF 页边距</h1>
      <button onClick={increasePdfMargins}>
        开始调整
      </button>
    </div>
  );
}

export default App;

每边补上 40 磅留白，页面整体变大，原内容四周多出一圈空白：

减小 PDF 文档的页边距

减小页边距反过来：新页尺寸比原页小，模板往左上偏移着画出，把四边多余的白边裁掉。要注意每边收掉的值不能超过原文档该边已有的空白，否则内容会被页面边界切到。

function App() {
  const decreasePdfMargins = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

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

    // 将待调整的 PDF 文件载入 VFS
    const inputFileName = '示例文档.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // 载入原文档，取第一页用于计算新页面尺寸
    const originalPdf = new pdfModule.PdfDocument();
    originalPdf.LoadFromFile(inputFileName);
    const firstPage = originalPdf.Pages.get_Item(0);

    // 每边收掉 20 磅白边，取值不超过原文档该边已有的留白
    const trim = 20;

    // 新页面尺寸＝原尺寸−四边收掉的值
    const newSize = new pdfModule.SizeF({
      width: firstPage.Size.Width - trim * 2,
      height: firstPage.Size.Height - trim * 2,
    });

    // 新页面本身不再额外留页边距
    const noMargins = new pdfModule.PdfMargins();
    noMargins.Top = 0;
    noMargins.Bottom = 0;
    noMargins.Left = 0;
    noMargins.Right = 0;

    // 逐页取模板，往左上偏移画出，裁掉四边的空白
    const newPdf = new pdfModule.PdfDocument();
    for (let i = 0; i < originalPdf.Pages.Count; i++) {
      const template = originalPdf.Pages.get_Item(i).CreateTemplate();
      const page = newPdf.Pages.Add({ size: newSize, margins: noMargins });
      page.Canvas.DrawTemplate({ template: template, location: new pdfModule.PointF(-trim, -trim) });
    }

    const outputFileName = '减小页边距.pdf';
    newPdf.SaveToFile(outputFileName);
    newPdf.Close();
    originalPdf.Close();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    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>减小 PDF 页边距</h1>
      <button onClick={decreasePdfMargins}>
        开始调整
      </button>
    </div>
  );
}

export default App;

每边收掉 20 磅白边，页面相应缩小，内容更贴近纸张边缘：

常见问题

为什么不直接改原文档页面的页边距

原因：页边距只决定内容区从哪里开始，供之后绘制的内容定位；原文档里已经画好的内容按绝对坐标固定，给 PageSettings.Margins 重新赋值并不会让它们挪动。

解决：把原页内容用 CreateTemplate() 取成模板，画到带页边距的新页上，上面两个示例都是这个思路。

减小页边距时内容被切掉了

原因：模板从 (-trim, -trim) 起画、页面又缩小了 2 × trim；一旦收掉的值超过原文档该边本来就有的空白，内容就会越过页面边界被裁掉。

解决：把 trim 调到不超过原文该边已有的留白。原文档本身就贴着边排版时，先按增大的方式补出留白，再考虑收窄。

新页面尺寸为什么要加上页边距

原因：PdfMargins 是画布原点内缩的距离，页面尺寸如果不跟着一起变大，内容区就会小于原内容，落在边外。

解决：新页尺寸按“原页尺寸 ＋ 左右、上下页边距之和”计算（增大时），或“原页尺寸 − 左右、上下之和”（减小时），让内容区正好容纳原内容：

const newSize = new pdfModule.SizeF({
  width: firstPage.Size.Width + marginsToAdd.Left + marginsToAdd.Right,
  height: firstPage.Size.Height + marginsToAdd.Top + marginsToAdd.Bottom,
});

获取免费许可证

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