PDF.js 实战教程：从零开始实现PDF渲染功能

平钰垚Zebediah

于 2025-05-30 09:06:48 发布

阅读量444

点赞数 5

本文链接：https://blog.youkuaiyun.com/gitblog_00543/article/details/148324770

版权

PDF.js 实战教程：从零开始实现PDF渲染功能

pdf.js PDF Reader in JavaScript 项目地址: https://gitcode.com/gh_mirrors/pd/pdf.js

前言

PDF.js 是一个强大的JavaScript库，它允许在Web浏览器中直接渲染PDF文档，无需任何插件。本文将带你深入了解PDF.js的核心概念和基本用法，通过实际示例演示如何实现PDF文档的加载与渲染。

基础概念

Promise机制

PDF.js 重度依赖Promise来处理异步操作。如果你不熟悉Promise，需要先了解以下几点：

Promise代表一个异步操作的最终完成或失败
通过.then()方法添加回调函数
通过.catch()处理错误情况

PDF.js核心对象模型

PDF.js的对象结构与实际PDF文档结构相似，主要包含以下层级：

文档对象(Document)：整个PDF文档的抽象
页面对象(Page)：单个PDF页面的抽象
视口(Viewport)：定义页面渲染的尺寸和方向

基础示例：Hello World

第一步：加载PDF文档

// 创建文档加载任务
const loadingTask = pdfjsLib.getDocument('helloworld.pdf');

// 处理加载完成后的Promise
loadingTask.promise.then(
  function(pdfDocument) {
    console.log('PDF加载完成，总页数:', pdfDocument.numPages);
    // 在这里可以继续处理文档
  },
  function(reason) {
    console.error('PDF加载失败:', reason);
  }
);

第二步：获取特定页面

pdfDocument.getPage(1).then(function(page) {
  console.log('页面获取成功:', page);
  // 可以在这里进行页面渲染
});

第三步：渲染页面到Canvas

// 设置缩放比例
const scale = 1.5;
// 获取页面视口
const viewport = page.getViewport({ scale });

// 处理高清屏幕
const outputScale = window.devicePixelRatio || 1;

// 获取Canvas元素和上下文
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');

// 设置Canvas尺寸
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";

// 创建渲染上下文
const renderContext = {
  canvasContext: context,
  transform: outputScale !== 1 
    ? [outputScale, 0, 0, outputScale, 0, 0] 
    : null,
  viewport: viewport
};

// 执行渲染
page.render(renderContext);

高级技巧

按指定宽度渲染

如果需要Canvas以特定宽度渲染，可以这样计算缩放比例：

const desiredWidth = 800; // 目标宽度(像素)
const viewport = page.getViewport({ scale: 1 });
const scale = desiredWidth / viewport.width;
const scaledViewport = page.getViewport({ scale });

错误处理最佳实践

pdfjsLib.getDocument('invalid.pdf').promise
  .then(function(pdf) {
    return pdf.getPage(1);
  })
  .then(function(page) {
    // 渲染页面
  })
  .catch(function(error) {
    console.error('发生错误:', error);
    // 显示错误信息给用户
  });

处理Base64编码的PDF

PDF.js可以直接处理Base64编码的PDF数据：

const base64 = 'JVBERi0x...'; // 完整的Base64编码PDF
const binaryString = atob(base64);
const bytes = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length; i++) {
  bytes[i] = binaryString.charCodeAt(i);
}

pdfjsLib.getDocument(bytes).promise.then(function(pdf) {
  // 处理PDF文档
});