PDF in HTML einbetten

1. Verwenden Sie das Tag embed, um PDF in HTML einzubetten
2. Verwenden Sie das iframe-Tag, um PDF in HTML einzubetten
3. Verwenden Sie das Tag object, um PDF in HTML einzubetten

In diesem Tutorial stellen wir Methoden zum Einbetten von PDF in HTML vor.

Verwenden Sie das Tag embed, um PDF in HTML einzubetten

HTML bietet ein embed-Tag, um externe Ressourcen in die Webseite einzubetten. Mit dem embed-Tag können wir externe Ressourcen wie PDFs, Mediaplayer, Webseiten etc. einbetten. Das Tag hat das Attribut src, wo wir den Pfad der einzubettenden Datei angeben können. Mit dem Attribut type können wir den Typ der eingebetteten Datei angeben. Für PDF sollte das Attribut type application/pdf sein. Das embed-Tag ist ein selbstschließendes Tag.

Erstellen Sie beispielsweise eine Datei namens files in dem Verzeichnis, in dem sich die HTML-Datei befindet. In der Datei files befindet sich ein PDF husky.pdf. Schreiben Sie in HTML das Tag embed und geben Sie im Attribut src den Pfad files/husky.pdf an. Setzen Sie dann das Attribut type auf application/pdf. Geben Sie als Breite und Höhe des PDFs 100% an.

Das folgende Beispiel generiert das PDF husky.pdf auf der Webseite. Das PDF deckt das Ansichtsfenster ab, da Höhe und Breite auf 100% eingestellt sind.

Das Tag embed wird möglicherweise nicht in allen modernen Browsern unterstützt. Der Android Chrome-Browser unterstützt das Einbetten von PDF nicht. In solchen Fällen können wir den Google Drive PDF Viewer verwenden. Wir sollten das Attribut type entfernen und die Google Drive-URL des PDFs festlegen. Auf diese Weise können wir PDF in HTML einbetten.

Beispielcode:

<embed src="files/husky.pdf" type="application/pdf" width="100%" height="100%" />

Verwenden Sie das iframe-Tag, um PDF in HTML einzubetten

Mit dem HTML-Tag iframe können wir andere Dokumente in die HTML-Datei einbetten. Wir können es verwenden, um PDF in HTML einzubetten. Den Pfad der PDF-Datei können wir im Attribut src angeben. Wir können die Höhe und Breite des PDFs innerhalb des Tags festlegen.

Schreiben Sie beispielsweise das Tag iframe und setzen Sie das Attribut src auf files/husky.jpg. Husky.jpg ist die einzubettende PDF-Datei, die im Verzeichnis files liegt. Die HTML-Datei und das Verzeichnis files liegen im selben Verzeichnis. Stellen Sie die Höhe und Breite des PDFs auf 100%. Das PDF deckt das Ansichtsfenster ab. Die Verwendung des iframe-Tags gibt dem PDF eine vertikale Bildlaufleiste. Auf diese Weise können wir eine PDF-Datei mit dem Tag iframe in HTML einbetten.

Beispielcode:

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

Verwenden Sie das Tag object, um PDF in HTML einzubetten

Wir können auch das object-Tag verwenden, um PDF in HTML einzubetten. Das Tag object setzt einen Container, den eine externe Ressource verwendet. Die externen Ressourcen können PDF, Medien, Webseiten usw. sein. Wir können den Pfad der Datei im Attribut data festlegen. Ähnlich wie bei den obigen Methoden können wir die Höhe und Breite des Containers über das Tag selbst festlegen. So können wir PDF mit dem Tag object in HTML einbetten.

Beispielcode:

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