在 HTML 中嵌入 PDF
在本教程中,我们将介绍在 HTML 中嵌入 PDF 的方法。
在 HTML 中使用 embed
标签嵌入 PDF
HTML 提供了一个 embed
标签来在网页中嵌入外部资源。我们可以使用 embed
标签嵌入外部资源,如 PDF、媒体播放器、网页等。该标签具有 src
属性,我们可以在其中给出要嵌入的文件的路径。我们可以使用 type
属性指定嵌入文件的类型。对于 PDF,type
属性应该是 application/pdf
。embed
标签是一个自闭合标签。
例如,在 HTML 文件所在的目录中创建一个名为 files
的文件。在 files
文件中,有一个 PDF husky.pdf
。在 HTML 中,编写 embed
标记并在 src
属性中指定路径 files/husky.pdf
。然后将 type
属性设置为 application/pdf
。给出 100%
的 PDF 的宽度和高度。
下面的示例将在网页上生成 husky.pdf
PDF。当高度和宽度设置为 100%
时,PDF 将覆盖视口。
可能并非所有现代浏览器都支持 embed
标签。Android Chrome 浏览器不支持嵌入 PDF。在这种情况下,我们可以使用 Google Drive PDF Viewer。我们应该删除 type
属性并设置 PDF 的 Google Drive URL。这样,我们就可以在 HTML 中嵌入 PDF。
示例代码:
<embed src="files/husky.pdf" type="application/pdf" width="100%" height="100%" />
在 HTML 中使用 iframe
标签嵌入 PDF
iframe
HTML 标签允许我们在 HTML 文件中嵌入其他文档。我们可以使用它在 HTML 中嵌入 PDF。我们可以在 src
属性中指定 PDF 文件的路径。我们可以在标签内设置 PDF 的高度和宽度。
例如,编写 iframe
标记并将 src
属性设置为 files/husky.jpg
。Husky.jpg
是要嵌入的 PDF 文件,位于 files
目录中。HTML 文件和 files
目录位于同一目录中。将 PDF 的高度和宽度设置为 100%
。PDF 将覆盖视口。使用 iframe
标签为 PDF 提供一个垂直滚动条。通过这种方式,我们可以使用 iframe
标签将 PDF 文件嵌入到 HTML 中。
示例代码:
<iframe src="files/husky.pdf" height="100%" width="100%"></iframe>
在 HTML 中使用 object
标签嵌入 PDF
我们还可以使用 object
标签将 PDF 嵌入到 HTML 中。object
标签将设置一个外部资源将使用的容器。外部资源可以是 PDF、媒体、网页等。我们可以在 data
属性中设置文件的路径。类似的,和上面的方法一样,我们可以从标签本身设置容器的高度和宽度。因此,我们可以使用 object
标签将 PDF 嵌入到 HTML 中。
示例代码:
<object data="files/husky.pdf" height="100%" width="100%"></object>
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn