前端实现 PDF 文件预览的 7 种方案详解_前端pdf预览

<embed src=\"document.pdf\" type=\"application/pdf\" width=\"100%\" height=\"600px\"/>

<object data=\"document.pdf\" type=\"application/pdf\" width=\"100%\" height=\"600px\"> <p>您的浏览器不支持PDF预览，请<a href=\"document.pdf\">下载查看</a></p></object>

<iframe src=\"document.pdf#view=FitH\" width=\"100%\" height=\"600px\" frameborder=\"0\"></iframe>

// 安装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); }); }});

// 文字层渲染（支持复制）page.getTextContent().then(textContent => { pdfjsLib.renderTextLayer({ textContent: textContent, container: textLayerDiv, viewport: viewport, textDivs: [] });});// 添加标注功能const annotations = page.getAnnotations();annotations.then(annots => { annots.forEach(annot => { // 绘制高亮/下划线等 });});

import { Viewer } from \'@react-pdf-viewer/core\';import \'@react-pdf-viewer/core/lib/styles/index.css\';function App() { return ( <div style={{ height: \'750px\' }}>  

2. Vue 生态：vue-pdf-embed

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

四、云服务方案

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; // 1MBlet 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. 可访问性：支持屏幕阅读器/键盘操作