如何使用 HTML 嵌入 PDF 文件?
在本文中,我们将学习如何在 HTML 文档中嵌入 PDF 文件,并通过示例了解它们的实现。有时,您可能希望将 PDF 文件插入 HTML 文档或代码,以使内容更具交互性。因为格式千差万别,完成任务并不容易。
要学习如何将 PDF 文件添加到 HTML 代码中,您需要知道如何使用 PDF 软件转换文件,作为必备知识。 PDF 的静态布局使其与 HTML 的响应式设计不兼容。要将 PDF 插入 HTML,我们必须先转换文件。另一种方法是将 PDF HTML 代码嵌入网页以使其具有交互性。以下嵌入方法可用于将 PDF 添加到 HTML 文件:
- 使用对象标签
- 使用 iframe
- 使用嵌入标签
我们将通过它们的实现来详细探索和理解这些方法。
方法一:使用对象标签
HTML 的对象标签是嵌入 PDF 文件的第一种方式。在下面的示例中,pdf 文件将显示在网页上,这是一个对象。
除了将 pdf 文件嵌入网页之外,object 标签还可以嵌入 ActiveX、Flash、视频、音频和Java小程序。交互式文档可以附加到嵌入了 HTML 标记的对象。可以使用对象的高度和宽度属性,根据您的需要在屏幕上显示。
示例 1 :此示例描述了使用对象标签在 HTML 中嵌入 PDF 文件。
HTML
PDF in HTML
GeeksforGeeks
Embedding the PDF file Using Object Tag
HTML
PDF in HTML
GeeksforGeeks
Embedding the PDF file Using Iframe Tag
HTML
PDF in HTML
GeeksforGeeks
Embedding the PDF file Using embed Tag
输出:
方法 2:使用 iframe
使用 iframe 标签是在 HTML 网页中嵌入 pdf 文件的第二种方法。在 Web 开发中,Web 开发人员使用 iframe 标签在网页中嵌入各种格式的文件,甚至是其他网站。由于其广泛的兼容性,iframe 标签被广泛用于嵌入 pdf。不支持 PDF 文档或对象标签的浏览器也可以使用此标签嵌入 pdf HTML 代码。
示例 2 :此示例描述了使用 iframe 在 HTML 中嵌入 PDF 文件。
HTML
PDF in HTML
GeeksforGeeks
Embedding the PDF file Using Iframe Tag
输出:
方法三:使用嵌入标签
将 pdf HTML 代码嵌入网站时,embed 标签的使用不如以前的标签频繁,因为如果用户的浏览器无法处理 PDF 文件,则显示将为空白。当不需要提供后备内容时,使用 embed a pdf HTML code 方法。
示例 3 :此示例描述了使用 embed 标签在 HTML 中嵌入 PDF 文件。
HTML
PDF in HTML
GeeksforGeeks
Embedding the PDF file Using embed Tag
输出: