pdf reader

2025-04-01 20:07:55 +02:00 · 2025-04-01 20:07:55 +02:00 · 490a7f0009
commit 490a7f0009
parent 3b1183f8b3
1 changed files with 102 additions and 0 deletions
--- a/pdf/index.html
+++ b/pdf/index.html
@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PDF Reader</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
+    <style>
+        body { font-family: Arial, sans-serif; text-align: center; position: relative; }
+        canvas { border: 1px solid black; margin-top: 10px; display: block; margin-left: auto; margin-right: auto; }
+        .btn-conteiner {
+            display: flex;
+            justify-content: center;
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            --color-text: #ffffff;
+            --color-background: #007BFF;
+        }
+
+        .btn-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 10px 40px;
+            text-decoration: none;
+            font-family: 'Poppins', sans-serif;
+            font-weight: 600;
+            font-size: 30px;
+            color: var(--color-text);
+            background: var(--color-background);
+            transition: 1s;
+            border-radius: 100px;
+            box-shadow: 0 0 0.2em 0 var(--color-background);
+        }
+
+        .btn-content:hover {
+            transition: 0.5s;
+            box-shadow: 0 0 0.4em 0 var(--color-background);
+        }
+    </style>
+</head>
+<body>
+    <h1>PDF Reader</h1>
+    <input type="file" id="uploadPdf" accept="application/pdf">
+    <br>
+    <canvas id="pdfCanvas"></canvas>
+    <div class="btn-conteiner">
+        <a class="btn-content" href="#" id="nextPage">
+            <span class="btn-title">NEXT</span>
+        </a>
+    </div>
+    
+    <script>
+        let pdfDoc = null;
+        let currentPage = 1;
+
+        document.getElementById('uploadPdf').addEventListener('change', function(event) {
+            const file = event.target.files[0];
+            if (file) {
+                const fileReader = new FileReader();
+                fileReader.onload = function() {
+                    const typedarray = new Uint8Array(this.result);
+                    pdfjsLib.getDocument({ data: typedarray }).promise.then(pdf => {
+                        pdfDoc = pdf;
+                        currentPage = 1;
+                        renderPage(currentPage);
+                    }).catch(error => {
+                        console.error("Fehler beim Laden des PDFs:", error);
+                    });
+                };
+                fileReader.readAsArrayBuffer(file);
+            }
+        });
+
+        function renderPage(pageNumber) {
+            if (!pdfDoc) return;
+            pdfDoc.getPage(pageNumber).then(page => {
+                const scale = 1.5;
+                const viewport = page.getViewport({ scale });
+                const canvas = document.getElementById('pdfCanvas');
+                const context = canvas.getContext('2d');
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+                const renderContext = { canvasContext: context, viewport };
+                page.render(renderContext);
+            }).catch(error => {
+                console.error("Fehler beim Rendern der Seite:", error);
+            });
+        }
+
+        document.getElementById('nextPage').addEventListener('click', function(event) {
+            event.preventDefault();
+            if (pdfDoc && currentPage < pdfDoc.numPages) {
+                currentPage++;
+                renderPage(currentPage);
+            }
+        });
+    </script>
+</body>
+</html>