当前位置：首页 > JavaScript

js实现pdf旋转

2026-03-01 14:31:16JavaScript

使用PDF.js实现PDF旋转

PDF.js是一个由Mozilla开发的JavaScript库，用于在浏览器中渲染PDF文档。以下方法可以实现PDF旋转功能：

安装PDF.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>

初始化PDF.js并加载文档

const pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

async function loadPDF(url) {
  const loadingTask = pdfjsLib.getDocument(url);
  const pdf = await loadingTask.promise;
  return pdf;
}

旋转PDF页面

js实现pdf旋转

async function rotatePage(pdf, pageNumber, degrees) {
  const page = await pdf.getPage(pageNumber);
  const viewport = page.getViewport({ rotation: degrees });

  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;

  await page.render({
    canvasContext: context,
    viewport: viewport
  }).promise;

  return canvas;
}

使用示例

const pdfUrl = 'example.pdf';
loadPDF(pdfUrl).then(pdf => {
  // 旋转第一页90度
  rotatePage(pdf, 1, 90).then(canvas => {
    document.body.appendChild(canvas);
  });
});

使用浏览器打印API旋转PDF

另一种方法是利用浏览器的打印功能来实现旋转效果：

js实现pdf旋转

function rotatePDFForPrint() {
  const style = document.createElement('style');
  style.innerHTML = `
    @page {
      size: auto;
      transform: rotate(90deg);
    }
  `;
  document.head.appendChild(style);
  window.print();
}

使用第三方库PDF-LIB实现旋转

PDF-LIB是一个更现代的JavaScript库，提供更全面的PDF操作功能：

安装PDF-LIB

npm install pdf-lib

旋转PDF代码示例

import { PDFDocument } from 'pdf-lib';

async function rotatePDFPages(pdfBytes, degrees) {
  const pdfDoc = await PDFDocument.load(pdfBytes);
  const pages = pdfDoc.getPages();

  pages.forEach(page => {
    page.setRotation(degrees);
  });

  return await pdfDoc.save();
}