在 HTML 中嵌入 PDF | D栈 - Delft Stack

  1. 在 HTML 中使用 embed 标签嵌入 PDF
  2. 在 HTML 中使用 iframe 标签嵌入 PDF
  3. 在 HTML 中使用 object 标签嵌入 PDF

在 HTML 中嵌入 PDF

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

Please enable JavaScript

Video Player is loading.

Play Video

PauseSkip Backward

Unmute

Current Time 0:09

/

Duration 0:49

Loaded: 85.77%

0:09

Stream Type LIVE

Seek to live, currently behind liveLIVE

Remaining Time -0:40

1x

Playback Rate

Chapters

  • Chapters

Descriptions

  • descriptions off, selected

Subtitles

  • subtitles settings, opens subtitles settings dialog
  • subtitles off, selected

Audio Track

  • main, selected

Auto(360pLQ)

  • 1080pFHD
  • 720pHD
  • Auto(360pLQ)

ShareFullscreen

This is a modal window.

Beginning of dialog window. Escape will cancel and close the window.

TextColorWhiteBlackRedGreenBlueYellowMagentaCyanOpacityOpaqueSemi-Transparent

Text BackgroundColorBlackWhiteRedGreenBlueYellowMagentaCyanOpacityOpaqueSemi-TransparentTransparent

Caption Area BackgroundColorBlackWhiteRedGreenBlueYellowMagentaCyanOpacityTransparentSemi-TransparentOpaque

Font Size50%75%100%125%150%175%200%300%400%

Text Edge StyleNoneRaisedDepressedUniformDropshadow

Font FamilyProportional Sans-SerifMonospace Sans-SerifProportional SerifMonospace SerifCasualScriptSmall Caps

Reset restore all settings to the default valuesDone

Close Modal Dialog

End of dialog window.

在 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。

示例代码：

HTML

htmlCopy<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 中。

示例代码：

HTML

htmlCopy<iframe src="files/husky.pdf" height="100%" width="100%"></iframe>

在 HTML 中使用 object 标签嵌入 PDF

我们还可以使用 object 标签将 PDF 嵌入到 HTML 中。object 标签将设置一个外部资源将使用的容器。外部资源可以是 PDF、媒体、网页等。我们可以在 data 属性中设置文件的路径。类似的，和上面的方法一样，我们可以从标签本身设置容器的高度和宽度。因此，我们可以使用 object 标签将 PDF 嵌入到 HTML 中。

示例代码：

HTML

htmlCopy<object data="files/husky.pdf" height="100%" width="100%"></object>

原网址: 访问
创建于: 2023-08-18 15:20:52
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论