Wie kann man PDF in HTML einbetten

Es gibt mehrere Möglichkeiten, eine PDF-Datei in Ihr HTML-Dokument einzuschließen:

  • Mit den Tags <embed> und <object> die als altmodisch gelten, weil sie jetzt veraltet sind.
  • Mit dem Tag <a> oder dem Tag <iframe>

Der einfachste Weg, ein PDF-Dokument in ein HTML-Dokument einzufügen, ist die Verwendung des Tags <a> mit seinem Attribut href . Was Sie dem Element hinzufügen müssen, ist die URL oder der Referenzlink Ihrer PDF-Datei. Ihr Code wird wie folgt aussehen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h1>PDF-Beispiel</h1>
    <p>Eröffnen Sie eine PDF-Datei <a href="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">zum Beispiel</a>.</p>
  </body>
</html>

Wie kann man den PDF-Viewer in HTML einbetten

Eine andere Möglichkeit, eine PDF-Datei zu Ihrem HTML-Dokument hinzuzufügen, ist die Verwendung des Tags <iframe>. Es ermöglicht auch die Einstellung Ihrer bevorzugten Breite und Höhe. Um den Code zu erhalten, folgen Sie diesen einfachen Schritten:

  1. Stellen Sie source ein, um die Webadresse Ihrer PDF-Datei anzugeben:
<iframe src="URL"></iframe>
  1. Stellen Sie die Attribute height und width, um die Größe von iframe zu bestimmen:
<iframe src="URL" height="200" width="300"></iframe>

Der fertige Code wird folgender Weise aussehen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h1>PDF-Beispiel mit iframe</h1>
    <iframe src="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf" width="100%" height="500px">
    </iframe>
  </body>
</html>

Wenn Sie nicht möchten, dass die Benutzer Ihre PDF-Datei herunterladen, fügen Sie einfach #toolbar=0 nach der URL Ihres PDF-Dokuments hinzu.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title> Der Titel des Dokuments</title>
  </head>
  <body>
    <h1>So deaktivieren Sie das Herunterladen des PDF-Dokuments</h1>
    <iframe src="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf#toolbar=0" width="100%" height="500px">
    </iframe>
  </body>
</html>