Archiv für den Monat: Juli 2021

PDF in Webseiten anzeigen

Veröffentlicht am von

In der letzten Zeit ist es nicht einfacher geworden PDF-Dokumente in einer Webseite darzustellen. Zwar beherrscht Firefox das problemlos, aber z.B. nicht die Android-Version. Auch auf verschiedenen Apfel-Geräten funktioniert das nicht von Haus aus.

Zum Glück gibt es das Projekt https://github.com/mozilla/pdf.js mit dessen Javascript die Einbindung auf sehr vielen Geräten identisch funktioniert. Ich habe mir die Software von https://mozilla.github.io/pdf.js/getting_started/ geladen und die ZIP-Datei in ein Verzeichnis /pdfjs entpackt.

Leider ist die Nutzung des Scripts etwas aufwendig. Eine einfache Lösung besteht darin die mitgelieferte Viewer-Seite aus dem Unterverzeichnis /pdfjs/web zu nutzen und über einen Iframe einzubinden:

<iframe id="pdf-js-viewer" 
        src="/pdfjs/web/viewer.html?file=/fileadmin/user_upload/netthelp.pdf" 
        title="webviewer" 
        frameborder="0" 
        width="500" 
        height="600">
</iframe>

Leider ist diese Lösung so nicht responsiv. Mit Hilfe von https://www.w3schools.com/ habe ich mir folgende Lösung erarbeitet (hier für eine Typo3 Installation):

<div style="position: relative;
            width: 100%;
            overflow: hidden;
            padding-top: 141%;
           ">
  <iframe id="pdf-js-viewer"
          src="/pdfjs/web/viewer.html?file=/fileadmin/user_upload/netthelp.pdf#zoom=auto"
          title="webviewer"
          frameborder="0"
          style="position: absolute;
                 top: 0;
                 left: 0;
                 bottom: 0;
                 right: 0;
                 width: 100%;
                 height: 100%;
                 border: none;
          ">
  </iframe>
</div>

Der Trick besteht darin ein DIV Element zu nutzen, das die ganze verfügbare Breite einnimmt und über padding-top eine darauf basierende Höhe bekommt. Bei den DIN Ax Dokumenten ist das Höhen-Breiten-Verhältnis 1,41:1 bei Portrait und 1:1,41=0,71:1 bei Landscape.

In dieses Element hinein wird dann der IFrame geladen und bekommt den vollständigen Platz zur Verfügung gestellt.

Mittels #zoom=auto wird erreicht, dass sich auch der PDF-Viewer an den zur Verfügung stehenden Platz anpasst. Hinter zoom=… könnten folgende Angaben stehen:

  •  200 (oder eine beliebige Prozentzahl)
  • page-width
  • page-height
  • page-fit
  • auto

Außer zoom gibt es noch den Parameter page=, damit kann angegeben werden, mit welcher Seite des PDFs die Darstellung startet. Weitere Möglichkeiten finden sich auf der Seite https://github.com/mozilla/pdf.js/wiki/Viewer-options.

Weitere Informationen: