Letzte Bearbeitung: 16. August 2021 um 19:21

PDF-Dokumente in HTML-Seiten einzubinden, ist keine Schwierigkeit und kann auch problemlos von Anfängern erledigt werden. Mithilfe des "object"-Tags benötigen Sie nämlich nur einen kurzen Code-Abschnitt.
Glücklicherweise wird der "object"-Tag von allen aktuellen Browsern unterstützt. Sie können ihn also ohne Sorge verwenden.
Der "object"-Tag verlangt einige Angaben. Neben den üblichen Größenangaben "width" und "height" wird auch das "type"-und "data"-Attribut benötigt.
Für "type" schreiben Sie "application/pdf" und für "data" geben Sie den Speicherort des Dokuments an. Verwenden Sie keinen eigenen Server, können Sie auch auf einige Filehosting-Plattformen zurückgreifen.
Die gesamte Syntax sehen Sie im Beispielbild rechts.
Auf der nächsten Seite zeigen wir Ihnen, wie Sie Webseiten als PDF speichern festhalten können.

https://praxistipps.chip.de/pdf-in-html-einbinden-so-klappts_42665

<p>

<object
 data="/userfiles/media/Herzoginkartoffeln_GuteKueche_de.pdf"
 type="application/pdf"
 width="800"
 height="1200">

</object> 

</p>

Diese Art der Einbindung hat allerdings den Nachteil, dass sie in dieser Form keinerlei responsive Eigenschaften hat.

Nach meinem Versuchen wird die Anzeige jedoch responsiv, wenn man die Breitenangabe in % der Breite des Blockbildenden umgebenden Elementes (Elternelement) angibt. Also so:

<object
 data="/userfiles/media/Herzoginkartoffeln_GuteKueche_de.pdf"
 type="application/pdf"
 width="100%"
 height="800">

Zwei weitere Möglichkeiten habe ich von dort: https://de.w3docs.com/snippets/html/wie-kann-man-pdf-in-html-einbetten.html

1. Das PDF als Zieladresse in einem Link angeben. Klickt man darauf, erfolgt die im Browser als Standard-Reaktion festgelegte Aktion. In der Regel dürfte dies das Anzeigen des Links im Browser sein. Es kann der User natürlich auch ein anderes Verhalten seines Browsers eingestellt haben, z.B. Anzeigen in einer externen Anwendung oder den Download der Datei. Da hier keine Integration der PDF in das Template der Website erfolgt, ist die Frage der Responsibilität ohne Bedeutung.
<p>Anzeigen einer PDF-Datei: <a title="Anzeigen einer PDF-Datei im neuen Fenster/TAB" href="/uploads/media/default/0001/01/5485bfc.pdf" target="_blank" rel="noopener">ein Beispiel</a>.</p>

2. Das PDF in einem IFRAME anzeigen. Bei dieser Variante lässt sich auch die Größe des Viewports angeben und durch Anhängen von #toolbar=0 den Download des Dokuments erschweren. Da die Breite als %-Wert definiert wird, ergibt sich hier automatisch die Responsibilität.
<iframe src="/uploads/media/default/0001/01/54c.pdf#toolbar=0" width="100%" height="500px">
</iframe>

---

Bildquellen

Slideshowbilder von James Osborne , Daniel Agrelo , fancycrave1 , Boskampi , Gerd Altmann