扫描件、图纸、电子发票这类 PDF 往往带着大片白边，页面尺寸却仍是原来的规格；反过来，也有人只想要页面上的一小块内容，其余部分都不必出现。要把多余的部分去掉，过去要么在桌面软件里一页页手动框选，要么把文件传到服务端处理——前者很难嵌进 Web 流程，后者意味着文档离开了用户的设备。

本文介绍用 Spire.PDF for JavaScript 裁切 PDF 页面。它基于 WebAssembly 在浏览器端直接加载、修改与保存 PDF 文档，全过程在本地完成，通过虚拟文件系统（VFS）读写文件，无需后端配合。本文以一个两页的示例文档演示这一过程。

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

裁切 PDF 页面

裁切页面靠 page.CropBox 完成，它是一个 RectangleF：x、y 从页面的左上角量起，width 与 height 决定保留多大一块，框外的内容不再显示。整份文档按同一套边距裁，就是遍历 doc.Pages，在每页 MediaBox 的基础上让出四边的距离。

function App() {
  const cropPdfPage = 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/`);

    // 创建 PdfDocument 对象并加载 PDF 文档
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // 四边统一裁掉 60 磅
    const margin = 60;

    for (let i = 0; i < doc.Pages.Count; i++) {
      const page = doc.Pages.get_Item(i);

      // MediaBox 给出该页的完整范围，据此算出裁切框（x、y 自页面左上角量起）
      const width = page.MediaBox.Width;
      const height = page.MediaBox.Height;

      page.CropBox = new pdfModule.RectangleF({
        x: margin,
        y: margin,
        width: width - margin * 2,
        height: height - margin * 2,
      });
    }

    const outputFileName = '按边距裁切.pdf';
    doc.SaveToFile(outputFileName);
    doc.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={cropPdfPage}>
        开始裁切
      </button>
    </div>
  );
}

export default App;

两页都按 60 磅边距裁切，页面外侧的白边与边框一并去掉：

常见问题

只能裁整份文档吗，单个页面怎么裁

原因：CropBox 是页面级属性，没有“整份文档”这一层接口；上面的循环只是为了让每页套用同一套边距。

解决：只裁某一页时，把循环去掉、直接对目标页赋值即可，x、y 同样自页面左上角量起：

// 只裁第 1 页：保留自左上角 (80, 80) 起 400 × 500 磅的一块
const page = doc.Pages.get_Item(0);
page.CropBox = new pdfModule.RectangleF({ x: 80, y: 80, width: 400, height: 500 });

裁切之后想还原怎么办

原因：CropBox 是就地改页面框，文档里没有另外记下“原来的框”。直觉上会把 page.MediaBox 赋回去，但这一步不会生效——赋值时的坐标是在当前可见区原点上叠加的，只换尺寸不改原点，可见区就停在裁切后的位置。裁掉 60 磅之后再把 MediaBox 赋回去，可见区仍然从 (60, 60) 起。

解决：裁切前留有原始文档时，重新载入它最省事。只能就着已经裁过的文件处理时，用负偏移把原点抵回页面左上角，再给回整页尺寸：

// 裁切偏移为 (offsetX, offsetY) 时的还原写法
page.CropBox = new pdfModule.RectangleF({
  x: -offsetX,
  y: -offsetY,
  width: page.MediaBox.Width,
  height: page.MediaBox.Height,
});

裁切后文件体积没变小，被裁掉的内容还能搜到

原因：CropBox 是软裁切，只改页面的可见框，框外的内容依旧留在文件里，文本搜索和复制仍能取到。

解决：如果目的是把内容真正从页面上去掉，就不能只设 CropBox，而要重建页面——新建一份同尺寸的文档，用 page.CreateTemplate() 取出内容后绘制到新页上，再另存为新文件。

获取免费许可证

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