PDF文件预览的7中方案详解

原创于 2025-08-10 10:00:00 发布 · 899 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

一：原生浏览器方案

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>

四：云服务方案

Goole 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 文件

七：方案对比与选型建议

方案	适用场景	优点	缺点
原生标签	快速原型开发	零配置、无依赖	样式不可控、功能受限
PDF.js	企业级复杂需求	完全可控、功能强大	实现成本较高
第三方封装库	特定框架项目	开箱即用、生态整合	灵活性受限
云服务	临时/演示场景	无需维护服务端	网络依赖、隐私风险
服务端渲染	老旧设备兼容	客户端压力小	服务端资源消耗大