扫描件方向不对、横版表格夹在一堆竖版页面里、打印前想把整份文档统一转个方向，这几种情况都不必重新排版。旋转角度是 PDF 页面自身的一个属性，改它只影响页面的显示方向，页面上的内容原样保留。

Spire.PDF for JavaScript 基于 WebAssembly 在浏览器端直接加载、修改与保存 PDF 文档，页面旋转在本地完成，通过虚拟文件系统（VFS）读写文件，无需后端配合。

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

• 旋转新页面
• 旋转已有页面

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

旋转新页面

整节页面要统一方向，在节上设一次就够：section.PageSettings.Rotate 取 PdfPageRotateAngle.RotateAngle90，该节所有页面顺时针转 90 度，RotateAngle180、RotateAngle270 可选，不设则不旋转。

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

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

    // 将中文字体载入 VFS，供页面文字使用
    await window.spire.FetchFileToVFS('ARIAL UNICODE MS.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // 创建空白文档
    const doc = new pdfModule.PdfDocument();

    // 新建一个节，整节页面共用顺时针 90 度的旋转角度
    const section = doc.Sections.Add();
    section.PageSettings.Size = pdfModule.PdfPageSize.A4();
    section.PageSettings.Rotate = pdfModule.PdfPageRotateAngle.RotateAngle90;

    // 在该节中添加页面
    const page = section.Pages.Add();

    // 在页面上写一段说明文字
    const font = new pdfModule.PdfTrueTypeFont({ fontFile: '/Library/Fonts/ARIAL UNICODE MS.TTF', size: 14 });
    page.Canvas.DrawString({
      s: '本页在创建时即设置为旋转 90 度',
      font: font,
      brush: pdfModule.PdfBrushes.get_Black(),
      x: 40,
      y: 60,
      format: new pdfModule.PdfStringFormat({ alignment: pdfModule.PdfTextAlignment.Left })
    });

    // 保存并从 VFS 读回，触发下载
    const outputFileName = '旋转新文档.pdf';
    doc.SaveToFile(outputFileName);
    doc.Close();

    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>新建页面时旋转</h1>
      <button onClick={createRotatedPdf}>
        开始创建
      </button>
    </div>
  );
}

export default App;

若只是想在建页时顺带指定角度，doc.Pages.Add(size, margins, rotation) 这个重载同样可用。

创建时即设为旋转 90 度的 A4 页面：

旋转已有页面

已有文档要改方向，角度存在页面自己的 Rotation 属性里，先读出当前值，再累加本次的旋转量。要注意写进去的是 PdfPageRotateAngle 的枚举数值（不旋转为 0，90 度对应 1），而不是角度本身。

function App() {
  const rotateExistingPage = 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 文档
    const doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // 取文档第 1 页，读出当前角度并在其基础上累加本次的旋转量
    const page = doc.Pages.get_Item(0);
    let rotation = page.Rotation.value + pdfModule.PdfPageRotateAngle.RotateAngle90.value;

    // 枚举数值只有 0~3，加到 4 表示转满一圈，回到不旋转
    if (rotation === 4) {
      rotation = 0;
    }
    page.Rotation = rotation;

    // 保存并从 VFS 读回，触发下载
    const outputFileName = '旋转指定页.pdf';
    doc.SaveToFile(outputFileName);
    doc.Close();

    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>旋转指定页面</h1>
      <button onClick={rotateExistingPage}>
        开始旋转
      </button>
    </div>
  );
}

export default App;

只有第 1 页旋转 90 度，其余页面方向不变：

常见问题

给 Rotation 赋值时提示 "Value is not an integer"

原因：page.Rotation 的写入端只接受整数。直接传 PdfPageRotateAngle 的枚举对象会抛 Assert failed: Value is not an integer: PdfPageRotateAngle.RotateAngle90 (object)。

解决：取枚举的 value 再赋值：

page.Rotation = pdfModule.PdfPageRotateAngle.RotateAngle90.value;

为什么填 90 之后页面转成了 180 度

原因：PdfPageRotateAngle 的枚举数值是 0、1、2、3，分别对应 0、90、180、270 度，写入端要的是这个数值，不是角度。写成 page.Rotation = 90 不会报错，但得到的不是 90 度；用 PdfPageRotateAngle.fromValue(90) 反查会直接抛 Invalid value for spirepdfPdfPageRotateAngle。

解决：换算成枚举数值再写入：

// 90 度
page.Rotation = pdfModule.PdfPageRotateAngle.RotateAngle90.value;

// 180 度
page.Rotation = pdfModule.PdfPageRotateAngle.RotateAngle180.value;

在 section.Pages.Add(...) 上带旋转参数为什么没效果

原因：带旋转参数的重载 Add(size, margins, rotation) 只在 doc.Pages 上生效。写到 section.Pages 上时这个参数会被忽略，页面方向改由所在节的 PageSettings.Rotate 决定，结果是文件里的 /Rotate 仍是 0，页面没有旋转，也不会有任何报错。

解决：两种写法二选一，别把参数传给 section.Pages：

// 写法一：节级设置，作用于该节全部页面
section.PageSettings.Rotate = pdfModule.PdfPageRotateAngle.RotateAngle90;
section.Pages.Add();

// 写法二：在 doc.Pages 上建页并传入角度
const page = doc.Pages.Add(
  pdfModule.PdfPageSize.A4(),
  new pdfModule.PdfMargins(),
  pdfModule.PdfPageRotateAngle.RotateAngle90
);

页面建好之后仍可单独调整，page.Rotation 会覆盖节级设置：

// 只把第 2 页改成 180 度，其余页面不受影响
doc.Pages.get_Item(1).Rotation = pdfModule.PdfPageRotateAngle.RotateAngle180.value;

获取免费许可证

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