前端 PDF 预览的 7 种主流方案详解

参数技巧：

• #view=FitH：水平适配
• #page=3：跳转指定页
• #zoom=80：设置缩放比例

二、PDF.js 方案（Mozilla 官方方案）

如果需要完全控制渲染流程，PDF.js 是首选。它把 PDF 解析成 Canvas，灵活性极高。

1. 基础集成

// 安装 npm install pdfjs-dist
import * as pdfjsLib from 'pdfjs-dist/webpack';

const container = document.getElementById('viewer');

pdfjsLib.getDocument('document.pdf').promise.then(pdf => {
  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    pdf.getPage(pageNum).then(page => {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      const viewport = page.getViewport({ scale: 1.5 });
      
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      
      page.render({
        canvasContext: context,
        viewport: viewport
      });
      container.appendChild(canvas);
    });
  }
});

2. 高级功能实现

除了图片渲染，还可以处理文本层和标注。

// 文字层渲染（支持复制）
pdfjsLib.renderTextLayer({
  textContent: textContent,
  container: textLayerDiv,
  viewport: viewport,
  textDivs: []
});

// 添加标注功能
const annotations = page.getAnnotations();
annotations.then(annots => {
  annots.forEach(annot => {
    // 绘制高亮/下划线等
  });
});

优势：完全控制渲染流程，支持文本选择/搜索，可扩展标注功能，支持 WebGL 加速渲染。 缺点：首次加载需要下载约 1MB 资源，复杂文档渲染性能需优化。

三、流行第三方库方案

如果不想重复造轮子，框架生态里的封装库能显著降低集成成本。

1. React 生态：react-pdf-viewer

import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

function App() {
  return (
    <div style={{ height: '750px' }}>
      <Viewer fileUrl="document.pdf" />
    </div>
  );
}

2. Vue 生态：vue-pdf-embed

<template>
  <vue-pdf-embed :source="pdfSource" :page="currentPage" @rendered="handleRendered" />
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed';
export default {
  components: { VuePdfEmbed },
  data() {
    return { currentPage: 1 };
  }
};
</script>

四、云服务方案

适合临时演示或对服务端维护有顾虑的场景，但要注意隐私风险。

Google Docs Viewer

<iframe src="https://docs.google.com/gview?url=YOUR_PDF_URL&embedded=true" style="width:100%;height:600px;" frameborder="0"></iframe>

注意事项：

• 需处理 URL 编码
• 国内访问可能需要特殊网络环境
• 有隐私泄露风险，敏感文件慎用

五、服务端渲染方案

当客户端压力过大或需要兼容老旧设备时，可以考虑服务端预处理。

1. PDF 转图片方案

// 服务端（Node.js）
const pdf2pic = require('pdf2pic');
const options = {
  density: 100,     // 输出质量
  format: "png",    // 输出格式
  width: 800,       // 输出宽度
  height: 1200      // 输出高度
};
const convert = new pdf2pic(options);

convert("document.pdf", 1)
  .then(response => {
    console.log(response); // { path: '/images/document.png' }
  });

2. PDF 转 HTML 方案

# 使用 pdf2htmlEX 工具
pdf2htmlEX --zoom 1.3 --embed-font 0 input.pdf output.html

六、移动端优化方案

移动端体验往往被忽视，但手势和性能才是关键。

1. 手势控制实现

// 使用 hammer.js 添加手势
const hammer = new Hammer(pdfContainer);
hammer.on('swipeleft', () => goToNextPage());
hammer.on('swiperight', () => goToPrevPage());
hammer.on('pinch', (e) => adjustZoom(e.scale));

2. 性能优化技巧

• 分页加载：仅渲染可视区域页面
• Canvas 缓存：缓存已渲染页面
• Web Worker：将 PDF 解析放入 Worker 线程
• 渐进加载：流式加载 PDF 文件

七、方案对比与选型建议

选型建议：

1. 内部管理系统：推荐 PDF.js + 文本搜索功能
2. 移动端 H5：第三方库 + 手势优化
3. 文档型网站：原生标签 + 服务端备选方案
4. 高安全场景：私有化部署 PDF.js

扩展知识：常见问题解决方案

1. 跨域问题处理

Nginx 配置示例：

location /pdf/ {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET';
}

2. 大文件加载优化

分片加载可以显著提升首屏速度：

const CHUNK_SIZE = 1024 * 1024; // 1MB
let offset = 0;

const loadChunk = () => {
  fetch(url, {
    headers: {
      'Range': `bytes=${offset}-${offset + CHUNK_SIZE}`
    }
  }).then(res => {
    // 处理分片数据
    offset += CHUNK_SIZE;
    if (offset < totalSize) loadChunk();
  });
};

3. 水印添加方案

利用 Canvas 绘制覆盖层：

function addWatermark(canvas, text) {
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(0,0,0,0.1)';
  ctx.font = '20px Arial';
  ctx.rotate(-30 * Math.PI / 180);
  ctx.fillText(text, 50, 100);
}

总结

前端 PDF 预览需要根据实际场景选择技术方案。对于需要深度定制和复杂交互的场景，推荐使用 PDF.js 配合 Canvas 渲染；对于追求快速实现的场景，可选用封装好的第三方库。无论选择哪种方案，都需要重点关注：

1. 性能优化：大文件处理/移动端适配
2. 安全控制：防止未授权访问/添加水印
3. 用户体验：加载进度指示/错误处理
4. 可访问性：支持屏幕阅读器/键盘操作