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

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

一、原生浏览器方案

1. 使用 <embed> 标签

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

优点：

• 零依赖原生支持
• 自动显示控制栏（打印/下载按钮）

缺点：

• 不同浏览器样式差异大
• 无法深度定制界面
• 移动端兼容性较差

2. 使用 <object> 标签

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

3. 使用 <iframe> 标签

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

参数技巧：

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

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

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. 高级功能实现

// 文字层渲染（支持复制）
page.getTextContent().then(textContent => {
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. 跨域问题处理

# 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 渲染；对于追求快速实现的场景，可选用封装好的第三方库。无论选择哪种方案，都需要重点关注：