迹忆客 专注技术分享

在本篇文章中，我们将介绍在 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>