文档常常是拼出来的：封面、正文、附件分别来自不同环节，交付前才发现封面被排到了第二章后面，或者某几页的先后需要调换。要改的只是页面顺序，内容一个字都不用动，但身边没有 PDF 编辑器时，这件事就卡住了——把文件传到服务端处理，等于让它离开用户的设备。本文将介绍如何使用 Spire.PDF for JavaScript 在浏览器端按指定顺序重排 PDF 页面。它基于 WebAssembly 加载、修改与保存 PDF 文档，页面顺序的调整全部在本地完成，通过虚拟文件系统（VFS）读写文件，无需后端配合。

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

重排页面顺序

页面顺序由 PdfPageCollection.ReArrange() 一次性改写，传入的序号数组既决定每一页的新位置，也决定文档的页数——数组里放几个索引，输出就是几页，所以要保留全部页面，就得把 0 到页数减一的索引一个不落地排进去。

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

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

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

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

    // 新的页面顺序：把第 3 页提到最前，其余页面顺延；索引从 0 开始
    const newOrder = [2, 0, 1, 3, 4];
    doc.Pages.ReArrange(newOrder);

    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={rearrangePages}>
        开始重排
      </button>
    </div>
  );
}

export default App;

第 3 页被移到最前、其余页面依次顺延后的文档：

常见问题

重排之后文档的页数变少了

原因：ReArrange() 是按传入的数组重建页面顺序，数组里没有出现的索引对应的页面不会进入结果文档。把 5 页文档写成 ReArrange([1, 0])，输出的就是 2 页。

解决：页数要保持不变，数组长度必须等于 doc.Pages.Count，且 0 到 doc.Pages.Count - 1 每个索引都出现一次：

// 索引从 0 开始，5 页文档对应 0、1、2、3、4
const pageCount = doc.Pages.Count;
const fullOrder = Array.from({ length: pageCount }, (_, i) => i);
doc.Pages.ReArrange(fullOrder);

调用 ReArrange() 时提示 "The page has existed."

原因：序号数组里出现了重复的索引，同一个原页被指定到了两个位置。一页无法同时占据两个位置，Spire.PDF 会直接抛错。

解决：确认数组是原页索引的一个排列——每个索引只出现一次，且不要超出页数范围，5 页文档的有效索引是 0 到 4。

只交换其中两页的位置该怎么写

原因：ReArrange() 处理的始终是整份文档的顺序，没有"只换两页"的简化重载。

解决：仍然按完整顺序数组来写，未涉及的位置保持原索引即可。下面这行把第 1 页与第 2 页对调：

// 交换前两页：0 与 1 互换，其余不动
const swappedOrder = [1, 0, 2, 3, 4];
doc.Pages.ReArrange(swappedOrder);

获取免费许可证

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