PDF 旋转听起来简单，但很多人遇到旋转方向反了、页面尺寸变错、或旋转后内容被裁切的问题。今天聊聊纯前端 PDF 旋转的核心问题和解决方案。
旋转的常见场景
| 场景 | 说明 |
|---|---|
| 扫描件颠倒 | 扫描时放反了，整份 PDF 上下颠倒 |
| 手机照片 | 手机拍照后方向不对，生成 PDF 也歪了 |
| 横竖混排 | 部分页面横版、部分竖版，需要统一方向 |
| 打印准备 | 打印前检查页面方向是否正确 |
技术方案：pdf-lib 旋转 PDF
核心实现
import { PDFDocument, degrees } from 'pdf-lib'
async function rotatePdf(
arrayBuffer: ArrayBuffer,
angle: number
): Promise<Uint8Array> {
const pdfDoc = await PDFDocument.load(arrayBuffer)
const pages = pdfDoc.getPages()
for (const page of pages) {
const currentRotation = page.getRotation().angle
page.setRotation(degrees(currentRotation + angle))
// 90°/270° 需要交换宽高
if (angle === 90 || angle === 270) {
const { width, height } = page.getSize()
page.setSize(height, width)
}
}
return await pdfDoc.save()
}
关键点：旋转角度
- 90°：顺时针旋转 90 度
- 180°：上下颠倒
- 270°：逆时针旋转 90 度（等同于顺时针 270 度）
关键点：尺寸交换
旋转 90°/270° 后，宽度和高度需要互换：
if (angle === 90 || angle === 270) {
const { width, height } = page.getSize()
page.setSize(height, width)
}
常见坑位
坑 1：旋转方向搞反
用户想顺时针转 90 度，结果变成了逆时针。
解决方案：
- 预览确认旋转方向
- 90° 和 270° 是相反方向，选择时注意
- 不确定时先用小样本测试
坑 2：180 度旋转后尺寸没变
部分工具只改变旋转角度，不交换页面尺寸。
解决方案：
- 使用纯前端工具（pdf-lib 自动处理）
- 检查旋转后的页面尺寸是否正确
- 如果发现尺寸异常，尝试重新旋转
坑 3：部分内容被裁切
旋转后靠近边缘的内容可能被裁掉。
解决方案：
- 旋转前检查内容布局
- 使用专业工具添加边距
- 复杂文档考虑用桌面软件处理
坑 4：只有部分页面旋转
用户只想旋转某些页面，但工具一次性旋转所有页面。
解决方案：
- 先拆分 PDF，旋转指定页面，再合并
- 或使用支持选择性旋转的专业工具
- 批量处理时注意页码顺序
坑 5：旋转后内容模糊
部分工具在旋转时重新渲染内容，导致质量下降。
解决方案：
- 使用矢量旋转（pdf-lib 方式），不重新渲染
- 避免多次旋转同一 PDF
- 保存为原始格式而非重新编码
和其他转换方式的区别
| 工具 | 处理方式 | 适用场景 |
|---|---|---|
| 纯前端工具 | 浏览器本地处理 | 敏感文档、隐私优先 |
| 在线转换工具 | 上传服务器处理 | 普通文档 |
| Adobe Acrobat | 桌面软件完整处理 | 复杂文档、专业需求 |
纯前端的优势是隐私安全，适合转换敏感文档。
使用建议
- 预览效果：旋转前先确认方向是否正确
- 控制旋转次数：避免反复旋转导致质量损失
- 敏感文档本地处理：不要用上传式工具
- 检查输出效果：旋转后抽查几页确认
总结
- PDF 旋转核心是角度选择和尺寸处理
- 90°/270° 需要交换页面宽高
- 纯前端方案适合私密文档
- 复杂文档建议使用桌面软件
搜索「PDF旋转」即可找到纯浏览器端工具，文件不上传服务器。
