在 HTML 中嵌入 PDF

1. 在 HTML 中使用 embed 標籤嵌入 PDF
2. 在 HTML 中使用 iframe 標籤嵌入 PDF
3. 在 HTML 中使用 object 標籤嵌入 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>