预览PDF的四种方式比较优缺点

1. <iframe>标签

<iframe src="your-pdf-url.pdf" width="100%" height="600px"></iframe>

•  优点：

  • 简洁易用，快速嵌入。

  • 支持浏览器原生 PDF 预览。

  • 预览pdf自带打印功能

•  缺点：

  • 无法自定义交互和样式。

  • 在某些浏览器（如 IE）兼容性差。

---

2. <embed>标签

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

 优点：

• 可设置备用内容：当浏览器不支持 PDF 时，可以提供备用文本或下载链接，提高用户可达性。

• 兼容性好：大多数现代浏览器原生支持 <embed> 预览 PDF，无需插件。

• 更具语义化：相比使用 JavaScript 插件或 iframe，<embed> 是更语义化的方式，推荐用于标准 Web 页面内容展示。

缺点：

• 控制能力有限：无法细致控制页面跳转、缩放比例、工具栏显示等交互功能。

• 样式定制受限：不能像 PDF.js 等方案一样自定义界面外观和用户交互逻辑。

• 移动端兼容性不稳定：部分移动浏览器（如微信内置浏览器）可能无法正确渲染。

---

3. <object>标签

<object data="your-pdf-url.pdf" type="application/pdf" width="100%" height="600px">
 <p>无法预览 PDF，请 <a href="your-pdf-url.pdf">点击下载</a></p>
 </object>

•  优点：

  • 可设置备用内容，兼容性好。

  • 更具语义化，推荐用于 Web 页面。

•  缺点：

  • 控制能力有限，无法自定义页面/缩放等。

---

4. pdf.js（Mozilla 提供的开源库）

一，安装库

npm install pdfjs-dist

 二.简单示例

<canvas id="pdfCanvas"></canvas>

import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

const loadingTask = pdfjsLib.getDocument('your-pdf-url.pdf');
loadingTask.promise.then((pdf) => {
  pdf.getPage(1).then((page) => {
    const viewport = page.getViewport({ scale: 1.5 });
    const canvas = document.getElementById('pdfCanvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    page.render({ canvasContext: context, viewport });
  });
});

• 优点：

  • 可自定义页面渲染、缩放、分页、搜索等。

  • 支持前端对 Blob、ArrayBuffer 数据渲染。

•  缺点：

  • 实现复杂，需要引入依赖。

  • 性能较 <iframe> 等原生方式略差。

---

总结对比表

方法	简单易用	可控性	兼容性	自定义 UI	适合场景
iframe	✅	❌	中	❌	快速预览，无需交互
embed	✅	❌	中	❌	基础嵌入式展示
object	✅	❌	✅	❌	有备用内容，兼容性好
pdf.js	❌	✅	高	✅	需要分页/缩放/预览 Blob 的情况