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

news/2024/12/19 6:16:29/
htmledit_views">

开发者可以使用不同的标签在 HTML 中嵌入 PDF 文件,常见的有 <embed>、<object> 和 <iframe>。它们都能在网页应用中显示 PDF,但哪种方式更好?有没有比这更好的方式来在浏览器中显示 PDF?

方法 1:使用 <embed> 标签

如果不需要回退内容,可以使用 <embed> 标签。 缺点: 不常用,因为如果浏览器不支持 PDF,显示会是一片空白。

<embed src="doc.html" title=pdf>pdf" type="application/html" title=pdf>pdf" width="400px" height="400px">
<noembed>
<p>
Your browser does not support PDF files.
<a href="myhtml" title=pdf>pdf.html" title=pdf>pdf">Download the file instead</a>
</p>
</noembed>
</embed>

方法 2:使用 <object> 标签

<object> 标签不仅可以嵌入 PDF,还可以嵌入视频、音频和 Flash。 通过 height 和 width 属性,可以根据需求调整 PDF 的显示大小。

<object data="doc.html" title=pdf>pdf" type="application/html" title=pdf>pdf" width="400px" height="400px">
<p>
Your browser does not support PDF files.
<a href="myhtml" title=pdf>pdf.html" title=pdf>pdf">Download the file instead</a>
</p>
</object>

方法 3:使用 <iframe> 标签

<iframe> 标签对于不支持 PDF 和 <object> 标签的浏览器非常有用。 优势: 如果浏览器无法渲染 PDF,这个标签会触发 PDF 的下载。

<iframe src="doc.html" title=pdf>pdf" width="400px" height="400px" style="border: 0;">
<p>
Your browser does not support PDF files.
<a href="myhtml" title=pdf>pdf.html" title=pdf>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 转换工具,你可以自己试试看。如果有更高的需求,我们还提供商业解决方案,可以嵌入到你的产品中使用。快来了解一下吧!


http://www.ppmy.cn/news/1556317.html

相关文章

C#轻松实现Winform监控文件夹变化以及监控文件新增、修改、删除、重命名等操作保姆级详细教程

文章目录 一、前言二、FileSystemWatcher 类三、FolderBrowserDialog 类四、具体操作1.设置监听文件夹2.订阅变更事件3.注意事项 一、前言 在开发应用程序时&#xff0c;我们可能会因为场景的需要&#xff0c;要对文件系统中的文件或文件夹进行实时监测&#xff0c;以便在文件…

NFT市场回暖:蓝筹项目成为复苏主力,空投潮助推价格上涨

随着2024年临近&#xff0c;NFT市场展现出强劲的回暖迹象。多个头部NFT项目公布了代币发行计划&#xff0c;并且随之而来的一波空投潮让市场活力再现。Magic Eden、Pudgy Penguins等项目的动向&#xff0c;成为了推动NFT市场复苏的重要力量。通过空投、代币生成事件&#xff08…

ES-IndexTemplate和DynamicTemplate

IndexTemplate 什么是IndexTemplate 索引模板&#xff0c;帮助你设定Mappings和Settings&#xff0c;并按照一定的规则&#xff0c;自动匹配到新创建的索引之上 模板仅在一个索引被新建的时候&#xff0c;才会产生应用&#xff0c;索引被修改不会影响已创建的索引可以设定多…

Maven 生命周期

文章目录 Maven 生命周期- Clean 生命周期- Build 生命周期- Site 生命周期 Maven 生命周期 Maven 有以下三个标准的生命周期&#xff1a; Clean 生命周期&#xff1a; clean&#xff1a;删除目标目录中的编译输出文件。这通常是在构建之前执行的&#xff0c;以确保项目从一个…

单片机STM32、GD32、ESP32开发板的差异和应用场景

STM32&#xff1a;意法半导体在 2007 年 6 月 11 日发布的产品&#xff0c;32位单片机。 GD32&#xff1a;兆易创新 2013 年发布的产品&#xff0c;在芯片开发、配置、命名上基本模仿 STM32&#xff0c;甚至 GPIO 和 STM32 都是 pin to pin 的&#xff0c;封装不改焊上去直接用…

计算机毕业设计Python+卷积神经网络股票预测系统 股票推荐系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

接口自动化测试用例详解

phpunit 接口自动化测试系列 Post接口自动化测试用例 Post方式的接口是上传接口&#xff0c;需要对接口头部进行封装&#xff0c;所以没有办法在浏览器下直接调用&#xff0c;但是可以用Curl命令的-d参数传递接口需要的参数。当然我们还以众筹网的登录接口为例&#xff0c;讲解…

Python利用chromedriver爬取商品主图数据

1.需要安装chromedriver Chrome下载地址 ChromeDriver官网下载地址&#xff1a;https://sites.google.com/chromium.org/driver/downloads ChromeDriver官网最新版下载地址&#xff1a;https://googlechromelabs.github.io/chrome-for-testing/ ChromeDriver国内镜像下载地址…