PDF-Vorschau im Druckdialog

Implementierung einer Vorschaufunktion für PDF-Dateien im Druckdialog des eCOYN ERP Systems. Die Vorschau soll mittels embed-Tag oder iframe realisiert werden und eine direkte Anzeige der PDF-Dokumente ermöglichen, bevor sie gedruckt werden. Ziel ist es, die sicherzustellen, dass die Dokumente vor Ausgabe so angezeigt wird wie es später in der PDF aussieht.

Idealerweise merkt sich das System die Einstellung ob PDF oder HTML vorschau im Local-Storage des Brwosers

• erstmal über Native Brwoser Funktion
• Später ggf. über JS Viewser

1. Einbetten mit dem <iframe>-Tag

Dies ist die einfachste Methode und funktioniert in den meisten modernen Browsern. Die PDF wird in einem Rahmen auf der Webseite angezeigt, und Benutzer können darin scrollen.

<iframe src="path/to/yourfile.pdf" width="100%" height="500px"></iframe>

• width und height können angepasst werden, um die Größe des Rahmens festzulegen.
• Ersetzen Sie path/to/yourfile.pdf durch den tatsächlichen Pfad zur PDF-Datei.

2. Einbetten mit dem <embed>-Tag

Mit dem <embed>-Tag kann die PDF ebenfalls direkt im Browser angezeigt werden:

<embed src="path/to/yourfile.pdf" width="100%" height="500px" type="application/pdf">

3. Verwenden eines PDF-Viewers wie PDF.js

Für mehr Kontrolle über die PDF-Anzeige und für ein besseres Nutzererlebnis können Sie eine JavaScript-Bibliothek wie PDF.js von Mozilla verwenden. Dies ist besonders nützlich, wenn Sie die PDF auf Mobilgeräten oder in älteren Browsern anzeigen möchten.

Ein einfaches Beispiel mit PDF.js:

1. Binden Sie die PDF.js-Bibliothek ein:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

2. Erstellen Sie ein Container-Element in Ihrem HTML für die PDF-Anzeige:

   <canvas id="pdf-canvas"></canvas>

3. Fügen Sie JavaScript hinzu, um die PDF anzuzeigen:

   <script>
     const url = 'path/to/yourfile.pdf';
     const pdfjsLib = window['pdfjs-dist/build/pdf'];
     pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
   
     pdfjsLib.getDocument(url).promise.then(pdf => {
       pdf.getPage(1).then(page => {
         const scale = 1.5;
         const viewport = page.getViewport({ scale });
         const canvas = document.getElementById('pdf-canvas');
         const context = canvas.getContext('2d');
         canvas.height = viewport.height;
         canvas.width = viewport.width;
   
         page.render({
           canvasContext: context,
           viewport: viewport
         });
       });
     });
   </script>