在 HTML 中嵌入 PDF

Subodh Poudel 2023年1月30日 2021年10月30日
  1. 在 HTML 中使用 embed 标签嵌入 PDF
  2. 在 HTML 中使用 iframe 标签嵌入 PDF
  3. 在 HTML 中使用 object 标签嵌入 PDF
在 HTML 中嵌入 PDF

在本教程中,我们将介绍在 HTML 中嵌入 PDF 的方法。

在 HTML 中使用 embed 标签嵌入 PDF

HTML 提供了一个 embed 标签来在网页中嵌入外部资源。我们可以使用 embed 标签嵌入外部资源,如 PDF、媒体播放器、网页等。该标签具有 src 属性,我们可以在其中给出要嵌入的文件的路径。我们可以使用 type 属性指定嵌入文件的类型。对于 PDF,type 属性应该是 application/pdfembed 标签是一个自闭合标签。

例如,在 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.jpgHusky.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 Poudel avatar Subodh Poudel avatar

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