一、浏览器使用 <embed> 标签预览 PDF 的原理
在日常开发中，我们经常需要在网页中嵌入 PDF 文件以供用户预览。最常见的做法是使用 <embed> 标签或 <iframe> 标签。本文重点解析 <embed> 标签嵌入 PDF 的原理与浏览器内部机制。
二、<embed> 标签基础
<embed> 是 HTML 用于嵌入外部资源的标签，其基本语法如下：
<embed src="example.pdf" type="application/pdf" width="100%" height="600px">-
src：指定 PDF 文件的 URL。
-
type ：资源类型，这里为
application/pdf。 -
width/height：嵌入内容的尺寸。
与 <iframe> 相比，<embed> 更专注于资源嵌入，不生成独立的文档上下文。
三、浏览器如何渲染 PDF
当浏览器遇到 <embed type="application/pdf"> 时，会触发以下机制：
-
识别资源类型
浏览器检测到 MIME 类型为
application/pdf，判断这是一个 PDF 文件。 -
调用内置 PDF 渲染器
-
Chrome 内置 PDFium 渲染器
-
Firefox 内置 PDF.js 渲染器
-
Edge 同样使用 PDFium
渲染器负责解析 PDF 文件的结构，包括文字、图片、字体和矢量图形。
-
-
下载并解析 PDF 文件
浏览器向
src指定的 URL 发起请求，下载 PDF 文件。下载完成后，内置渲染器解析 PDF 内容，并生成可交互的页面。
-
渲染到
<embed>容器渲染器将 PDF 页面显示在
<embed>区域内，用户可以滚动、缩放和查看页面。
四、<embed> 与 <iframe> 的区别
| 特性 | <embed> |
<iframe> |
|---|---|---|
| 上下文 | 不生成独立文档上下文 | 生成独立文档上下文 |
| 兼容性 | Chrome/Edge/Firefox 最佳 | 同样支持，但 <embed> 更轻量 |
| 交互性 | 支持滚动、缩放 | 支持滚动、缩放，但可能受 iframe 限制 |
通常全屏预览或嵌入 PDF，使用 <embed> 更方便。
五、开发者工具观察
在浏览器 DevTools 中，如果查看 <embed> 元素：
<embed src="about:blank" type="application/pdf">-
src可能会先是about:blank，实际 PDF 会通过 JS 动态加载。 -
<embed>本身只是一个容器，PDF 渲染器将文件内容渲染到该容器中，而不是直接在 DOM 中显示 PDF 的原始结构。
六、总结原理
-
浏览器通过
<embed>标签识别 PDF 文件类型。 -
内置 PDF 渲染器解析 PDF 内容。
-
渲染器将 PDF 页面呈现在
<embed>容器中，实现预览。 -
用户可直接交互（滚动、缩放），而 DevTools 中
<embed>只是容器。
七、注意事项
-
并非所有浏览器都内置 PDF 渲染器，某些 Safari 版本可能会调用系统 PDF 阅读器插件。
-
<object>标签也可嵌入 PDF，但<embed>在 Chrome 上兼容性更好。 -
对于跨域 PDF，浏览器可能受同源策略限制，需要后端设置
Content-Disposition或CORS允许访问。