如何通过PDF.js Display API实现高效PDF缩放旋转，无需重渲染？

你的核心痛点在于每次缩放/旋转都触发全量重渲染，而官方Viewer通过视觉层快速反馈+按需重渲染的策略实现了高性能操作，下面具体拆解实现思路和优化方案：

官方Viewer的高性能实现逻辑 #

官方Viewer并没有在每次调整缩放/旋转时都重新解析PDF内容，而是采用了两步走的策略：

1. 瞬时视觉反馈：通过CSS transform对页面容器直接应用缩放、旋转变换，利用浏览器GPU加速完成，几乎零耗时；
2. 按需重渲染：仅当缩放比例超出缓存阈值（比如与当前渲染的缩放比例差值超过50%），或者旋转角度变更时，才会重新计算Viewport并调用PDF渲染接口，同时会缓存不同缩放/旋转状态下的渲染结果，避免重复解析。

此外，Viewer会复用同一个PDFPage实例，利用PDF.js内部的页面数据缓存，跳过重复的PDF解析步骤，进一步降低耗时。

基于Display API的优化方案 #

你可以照搬官方的核心思路，用以下方法优化：

1. 用CSS Transform实现瞬时视觉调整 #

对于小幅度缩放（比如±30%）或固定角度旋转（90/180/270°），直接对渲染PDF的Canvas元素应用CSS变换，不需要调用render：

const displayCanvas = document.getElementById('pdf-canvas');
// 缩放至1.2倍
displayCanvas.style.transform = 'scale(1.2)';
// 旋转90度
displayCanvas.style.transform = 'rotate(90deg)';

这种方式完全由浏览器GPU处理，操作响应几乎瞬时完成。

2. 缓存渲染结果，按需重渲染 #

当缩放比例变化过大（比如从1.0倍跳到2.0倍），CSS缩放会导致内容模糊，此时才需要重新渲染：

• 初始化时渲染一次基础缩放比例的PDF，将结果缓存到离屏Canvas；
• 当缩放/旋转超出合理范围时，才重新计算Viewport并渲染到缓存Canvas；
• 日常操作直接复用缓存内容，配合CSS变换展示。

示例代码：

let pdfPageInstance;
const cachedCanvas = document.createElement('canvas');
const displayCanvas = document.getElementById('pdf-canvas');
let currentScale = 1;
let currentRotation = 0;

// 初始化：获取页面并渲染基础版本
async function initPDF() {
  const pdfDoc = await pdfjsLib.getDocument('your-file.pdf').promise;
  pdfPageInstance = await pdfDoc.getPage(1);
  const baseViewport = pdfPageInstance.getViewport({ scale: currentScale, rotation: currentRotation });
  cachedCanvas.width = baseViewport.width;
  cachedCanvas.height = baseViewport.height;
  await pdfPageInstance.render({
    canvasContext: cachedCanvas.getContext('2d'),
    viewport: baseViewport
  }).promise;
  // 初始化显示
  renderToDisplay();
}

// 更新显示：优先用CSS变换，按需重渲染
function updateView(newScale, newRotation) {
  // 先应用CSS变换，快速反馈
  displayCanvas.style.transform = `scale(${newScale / currentScale}) rotate(${newRotation - currentRotation}deg)`;

  // 判断是否需要重渲染（缩放差值超过50%，或旋转角度变更）
  const scaleDiff = Math.abs(newScale - currentScale) / currentScale;
  if (scaleDiff > 0.5 || newRotation !== currentRotation) {
    const newViewport = pdfPageInstance.getViewport({ scale: newScale, rotation: newRotation });
    cachedCanvas.width = newViewport.width;
    cachedCanvas.height = newViewport.height;
    // 重渲染到缓存Canvas
    pdfPageInstance.render({
      canvasContext: cachedCanvas.getContext('2d'),
      viewport: newViewport
    }).promise.then(() => {
      currentScale = newScale;
      currentRotation = newRotation;
      // 重置变换，用清晰的缓存内容更新显示
      displayCanvas.style.transform = '';
      renderToDisplay();
    });
  }
}

// 将缓存内容绘制到显示Canvas
function renderToDisplay() {
  displayCanvas.width = cachedCanvas.width;
  displayCanvas.height = cachedCanvas.height;
  displayCanvas.getContext('2d').drawImage(cachedCanvas, 0, 0);
}

3. 复用PDFPage实例 #

确保全程复用同一个PDFPage对象，不要每次操作都重新调用getPage(1)——PDF.js会缓存已解析的页面数据，复用实例能跳过重复的PDF解析步骤，大幅降低耗时。

内容的提问来源于stack exchange，提问作者Chris Voss