PDF einbinden mit object, iframe, embed oder a-Element?

Die einfachste Weg, ein PDF auf der Webseite zum Download oder zur Einsicht anzubieten, ist das einfache a-Element. iframe und object hingegen können das PDF auch direkt anzeigen, und dann ist das iframe das Arbeitspferd schlechthin.

Das object-Tag ist nicht nur ein Behälter für SVG oder für Video – HTML object kann auf ein PDF-Dokument verweisen und bietet dem Benutzer inmitten der Webseite einen Einblick in das Dokument.

<style>
   width:100%; 
   height: auto;
   aspect-ratio: 21/29;
</style>

<object data="spektralfarbzug.pdf">
</object>

HTML object ist heute ohne großen Aufwand responsiv und CSS kann Breite und Höhe über das Seitenverhältnis mit aspect-ratio bestimmen. Die Browser steuern ihre eigenen Steuerelemente für das PDF bei, so dass der Benutzer das PDF vergrößern kann.

PDF mit embed in Webseite einbetten

embed gibt es auch noch … oder wieder. Das historische embed-Tag kam zurück, weil die Rückwärts-Kompatibilität ein hehres Ziel der Standards ist.

<embed style="width:100%; aspect-ratio: 381/212" 
       height="auto" 
       src="plan.pdf"></embed>

Im Grunde genommen ist es egal, ob object, iframe oder embed das PDF anzeigt. Einzig das altertümliche Data-Attribut des object-Tags fällt aus dem Rahmen, aber dafür hat das object ein Fallback, wenn das Laden des Dokuments mal nicht funktioniert.

Doppelseitiges PDF

Wenn das Dokument doppelseitig angelegt wurde (z.B. ein Buch), wird es auch doppelseitig angezeigt. Weder object noch iframe oder embed können aus dem PDF eines einseitig angelegten Dokuments eine doppelseitige Anzeige erzeugen.

<iframe style="width:100%; aspect-ratio: 4734/3081" height="auto" src="/Kap08_Problemzonen.pdf"></iframe>

Erst in den Menüs der Browser kann der Benutzer bei mehrseitigen PDFs eine doppelseitige Ansicht herstellen. Allerdings sind die Eingriffsmöglichkeiten jedes Browsers anders – siehe Ansicht der PDF-Menüs.

PDF im Spaltensatz und PDF auf mobilen Geräten

Der klassische Spaltensatz wie z.B. in Zeitschriften ist als PDF auf dem Monitor ein Problem für den Leser, der die Seite zuerst herunterscrollen und dann wieder heraufscrollen muss. Im Spaltensatz angelegte Dokumente sind ok für Benutzer, die das PDF herunterladen und ausdrucken, aber zum Lesen auf dem Monitor sind sie wenig geeignet.

Auf mobilen Geräten wird das PDF soweit verkleinert, dass es kaum lesbar ist. PDF-Dokument speichern und drucken gehört für die meisten Benutzer von mobilen Geräten nicht zur Routine. Obendrein müssen PDF-Dokumente vollständig geladen sein, bevor sie angezeigt werden. Die Anzeige eines PDF mit 4, 8 oder mehr MB auf den kleinen Monitoren von Handys sollte also lieber zugunsten eines Links und evtl. Thumbnail einer Seite unterbleiben.

Damit das PDF zur Homepage führt

Das Einbetten ist aber nur die halbe Miete – das PDF selber sollte einige Regeln beachten. PDF wird von den Suchmaschinen genauso aufgenommen und indexiert wie eine Webseite. Es kommt also vor, dass Besucher auf dem PDF landen und nicht auf der Webseite, die das PDF linkt.

Jedes PDF muss also für einen Weg nach Hause sorgen – einen Link aufweisen, der zur Webseite führt. Für diejenigen, die PDFs ausdrucken, muss der Link abtippbar sein, also u.U. auch einen Shortcode für die Webseite anlegen. Und ein Sahnehäubchen ist ein QR-Code, der zur Quellseite des PDFs führt …

<script type="module">
import QRCode from "https://cdn.jsdelivr.net/npm/qrcode/+esm";

async function generateQR() {
  const svg = await QRCode.toString(window.location.href, {
    type: 'svg',
    errorCorrectionLevel: 'H',
    width: 160
  });

  document.getElementById("qrcode-print").innerHTML = svg;
}
generateQR();
</script>