(教程)如何在HTML网页里嵌入PDF文件?

开发者可以使用不同的标签在 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 转换工具,你可以自己试试看。如果有更高的需求,我们还提供商业解决方案,可以嵌入到你的产品中使用。快来了解一下吧!

相关推荐
豆豆1 小时前
day32 学习笔记
图像处理·笔记·opencv·学习·计算机视觉
TT模板1 小时前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
凉豆菌2 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
小墨宝4 小时前
js 生成pdf 并上传文件
前端·javascript·pdf
知来者逆6 小时前
计算机视觉——速度与精度的完美结合的实时目标检测算法RF-DETR详解
图像处理·人工智能·深度学习·算法·目标检测·计算机视觉·rf-detr
猿究院_xyz6 小时前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html
我爱吃朱肉7 小时前
纯HTMLCSS静态网站——元神
css·html
前端大白话8 小时前
前端必看!figure标签在响应式图片排版中的王炸操作,grid/flex布局实战指南
前端·设计模式·html
HyperAI超神经9 小时前
12个HPC教程汇总!从入门到实战,覆盖分子模拟/材料计算/生物信息分析等多个领域
图像处理·人工智能·深度学习·生物信息·分子模拟·材料计算·vasp
热水养鲨鱼9 小时前
Java实现HTML转PDF(deepSeekAi->html->pdf)
人工智能·pdf·html