PDF.js：浏览器原生PDF渲染的终极解决方案

官方文档与示例库：PDF.js官网

一、核心价值与技术优势

PDF.js是由Mozilla开发的开源JavaScript库，允许在浏览器中无插件渲染PDF，彻底摆脱Adobe Reader等外部依赖。其核心技术特点包括：

1. 纯前端解析：基于HTML5 Canvas和WebGL实现PDF到网页元素的转换，不依赖后端服务。
2. 跨平台兼容：支持Chrome、Firefox、Safari等主流浏览器，包括移动端。
3. 功能全面：提供文本搜索、缩放、分页、文本选择/复制、注释渲染等交互功能。
4. 高性能架构：通过Web Worker分离解析与渲染线程，避免阻塞主线程。

二、快速集成与基础使用

安装方式

• CDN引入：

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

• npm安装：

  npm install pdfjs-dist  
  

  import * as pdfjsLib from 'pdfjs-dist';  
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdf.worker.min.js';  
  

基础渲染示例

<canvas id="pdf-canvas"></canvas>  

<script>  
  const url = 'document.pdf';  
  pdfjsLib.getDocument(url).promise.then(pdf => {  
    pdf.getPage(1).then(page => {  
      const viewport = page.getViewport({ scale: 1.5 });  
      const canvas = document.getElementById('pdf-canvas');  
      const ctx = canvas.getContext('2d');  
      canvas.width = viewport.width;  
      canvas.height = viewport.height;  

      page.render({  
        canvasContext: ctx,  
        viewport: viewport  
      });  
    });  
  });  
</script>  

关键点： getViewport控制显示尺寸，scale参数调节缩放比例。

三、进阶功能与实战技巧

1. 多页渲染与分页控制

// 渲染所有页面  
const container = document.getElementById('pdf-container');  
for (let i = 1; i <= pdf.numPages; i++) {  
  pdf.getPage(i).then(page => {  
    const canvas = document.createElement('canvas');  
    container.appendChild(canvas);  
    // ...渲染逻辑  
  });  
}  

// 分页交互（上一页/下一页）  
let currentPage = 1;  
document.getElementById('next-btn').addEventListener('click', () => {  
  if (currentPage < pdf.numPages) renderPage(++currentPage);  
});  

四、性能优化

1. 懒加载页面：仅渲染可视区域内页面。
2. 页面缓存：对已渲染页面使用Map存储Canvas对象。
3. 降低分辨率：大文件设置scale: 1.0减少渲染开销。
4. 销毁无用实例：组件卸载时调用pdf.destroy()释放内存。