在 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