开发者可以使用不同的标签在 HTML 中嵌入 PDF 文件，常见的有 <embed>、<object> 和 <iframe>。它们都能在网页应用中显示 PDF，但哪种方式更好？有没有比这更好的方式来在浏览器中显示 PDF？
方法 1：使用 <embed> 标签
如果不需要回退内容，可以使用 <embed> 标签。 缺点： 不常用，因为如果浏览器不支持 PDF，显示会是一片空白。
<embed src="doc.pdf" type="application/pdf" width="400px" height="400px">
<noembed>
<p>
Your browser does not support PDF files.
<a href="mypdf.pdf">Download the file instead</a>
</p>
</noembed>
</embed>
方法 2：使用 <object> 标签
<object> 标签不仅可以嵌入 PDF，还可以嵌入视频、音频和 Flash。 通过 height 和 width 属性，可以根据需求调整 PDF 的显示大小。
<object data="doc.pdf" type="application/pdf" width="400px" height="400px">
<p>
Your browser does not support PDF files.
<a href="mypdf.pdf">Download the file instead</a>
</p>
</object>
方法 3：使用 <iframe> 标签
<iframe> 标签对于不支持 PDF 和 <object> 标签的浏览器非常有用。 优势： 如果浏览器无法渲染 PDF，这个标签会触发 PDF 的下载。
<iframe src="doc.pdf" width="400px" height="400px" style="border: 0;">
<p>
Your browser does not support PDF files.
<a href="mypdf.pdf">Download the file instead</a>
</p>
</iframe>
为什么会有这三种标签？
这可以追溯到 Java Applet 和 Flash 的时代。当时 <iframe> 标签主要用于嵌入其他 HTML 页面，而 <object> 标签则允许系统应用程序接管渲染。然而，现代浏览器出于安全考虑，不再支持这种插件方式。
至于 <embed>，它直到 HTML5 标准被采纳前都是非标准标签。更多历史背景可以参考 MDN 的文章：从 object 到 iframe —— 其他嵌入技术的发展
所有浏览器都支持 PDF 嵌入吗？
并不是。桌面浏览器的支持度很好，但在移动端和平板浏览器上的支持较差。 例如：
- Chrome on Android：无法直接显示 PDF。
- Safari on iOS：只能显示 PDF 的第一页。
什么是“内嵌标签”？
“内嵌标签”告诉浏览器，当它无法处理提供的文件或文件类型时，需要渲染什么内容。 例如，在 <embed> 标签中包含 <noembed> 标签，这就是一种回退内容。 不过实际上，浏览器可能会忽略这些回退内容。例如：
- Chrome on Android 对 <embed> 和 <iframe> 标签显示自己的回退内容。
因此，开发者需要自行测试。
胜出者：<object> 标签
我选择 <object> 标签为胜出者，因为它是唯一一个在 Chrome on Android 中使用了提供的回退内容的标签。 如果你希望控制用户在 PDF 无法渲染时看到的内容，这一点至关重要。
以这种方式嵌入 PDF 的优缺点
优点：
- 简单易用。
- Google 可能会抓取一部分内容进行排名。
- 在桌面设备上效果不错。
缺点：
- 加载速度慢（想象一下，为了看一页内容需要下载整个网站）。
- 不利于 SEO。
- 黑盒操作，无法以编程方式与 PDF 内容交互。
- 不同设备上的用户体验不一致。
有更好的方式吗？
有！将 PDF 文件转换为 HTML 代码，可以在任何设备上提供一致的用户体验。 优势：
- 可以增加交互性。
- 允许开发者以 HTML 的方式操控内容，告别“黑盒”。
我们提供免费的在线 PDF 转 HTML 转换工具，你可以自己试试看。如果有更高的需求，我们还提供商业解决方案，可以嵌入到你的产品中使用。快来了解一下吧！