当前位置：首页 > JavaScript

js实现pdf旋转

2026-04-04 15:17:51JavaScript

实现PDF旋转的JavaScript方法

在JavaScript中实现PDF旋转通常需要使用专门的库或API，以下是几种常见的方法：

使用PDF.js库

PDF.js是Mozilla开发的一个开源库，可用于在浏览器中渲染PDF文件并实现旋转功能。

// 加载PDF.js库
const pdfjsLib = require('pdfjs-dist');

// 加载PDF文件
const loadingTask = pdfjsLib.getDocument('yourfile.pdf');
loadingTask.promise.then(function(pdf) {
  // 获取第一页
  return pdf.getPage(1);
}).then(function(page) {
  // 设置旋转角度（90度）
  const rotate = 90;

  // 创建视图
  const viewport = page.getViewport({ scale: 1.0, rotation: rotate });

  // 渲染到canvas
  const canvas = document.getElementById('pdf-canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;

  const renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  page.render(renderContext);
});

使用PDF-lib库

PDF-lib是一个功能强大的库，可以直接修改PDF文件并保存旋转后的版本。

import { PDFDocument } from 'pdf-lib';

async function rotatePDF() {
  // 加载PDF文件
  const existingPdfBytes = await fetch('yourfile.pdf').then(res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(existingPdfBytes);

  // 获取所有页面
  const pages = pdfDoc.getPages();

  // 旋转每一页（90度）
  pages.forEach(page => {
    page.setRotation(90);
  });

  // 保存修改后的PDF
  const rotatedPdfBytes = await pdfDoc.save();

  // 下载旋转后的PDF
  download(rotatedPdfBytes, 'rotated.pdf', 'application/pdf');
}

浏览器API配合Canvas

对于简单的PDF显示和旋转，可以使用浏览器API配合Canvas实现。

// 使用FileReader读取PDF文件
const fileInput = document.getElementById('pdf-input');
fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {
    const typedArray = new Uint8Array(event.target.result);

    // 使用PDF.js渲染
    pdfjsLib.getDocument(typedArray).promise.then(function(pdf) {
      pdf.getPage(1).then(function(page) {
        const viewport = page.getViewport({ scale: 1.0, rotation: 90 });
        const canvas = document.getElementById('pdf-canvas');
        const context = canvas.getContext('2d');
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        page.render({
          canvasContext: context,
          viewport: viewport
        });
      });
    });
  };
  reader.readAsArrayBuffer(file);
});

服务器端处理

如果需要更复杂的PDF旋转操作，可以考虑使用服务器端库如Node.js的pdfkit。

js实现pdf旋转

const PDFDocument = require('pdfkit');
const fs = require('fs');

// 创建新PDF文档
const doc = new PDFDocument({ autoFirstPage: false });

// 添加页面并旋转
doc.addPage({ size: [612, 792], rotation: 90 });
doc.text('Rotated Text', 50, 50);

// 保存文件
doc.pipe(fs.createWriteStream('rotated.pdf'));
doc.end();