Initial commit

2022-09-04 12:45:01 +02:00
commit f4a01d6a69
11601 changed files with 4206660 additions and 0 deletions
--- a/HTML/PdfViewer/index.html
+++ b/HTML/PdfViewer/index.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>PDF Viewer</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js" integrity="sha512-qa1o08MA0596eSNsnkRv5vuGloSKUhY09O31MY2OJpODjUVlaL0GOJJcyt7J7Z61FiEgHMgBkH04ZJ+vcuLs/w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <style>
+        #container {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        #backward {
+            position: absolute;
+            top: 50%;
+            left: 10px;
+            transform: translate(0, -50%);
+        }
+
+        #forward {
+            position: absolute;
+            top: 50%;
+            left: calc(100% - 10px);
+            transform: translate(-100%, -50%);
+        }
+
+        .navigator {
+            cursor: pointer;
+            user-select: none;
+            font-weight: bold;
+            background: aliceblue;
+            border-radius: 5px;
+            width: 25px;
+            text-align: center;
+        }
+
+        #search {
+            width: calc(100% - 10px);
+        }
+
+        #site {
+            position: absolute;
+            left: 10px;
+            top: calc(100% - 10px);
+            transform: translate(0, -100%);
+        }
+    </style>
+</head>
+<body>
+    <div id="container">
+        <canvas id="pdf"></canvas>
+    </div>
+    <a class="navigator" id="backward"><<</a>
+    <a class="navigator" id="forward">>></a>
+    <label for="search">Suche</label>
+    <input type="text" id="search">
+    <span id="site"></span>
+
+    <script>
+        let pdf;
+        let textOnPDF = [];
+        let pages = [];
+        let allPages = [];
+        let currentIndex = 0;
+
+        const site = document.getElementById("site");
+
+        async function loadPDF() {
+            pdf = await pdfjsLib.getDocument("cars.pdf").promise;
+            for (let i = 1; i <= pdf.numPages; i++) {
+                const page = await pdf.getPage(i);
+                const text = await page.getTextContent();
+                if (text.items[0] === undefined) textOnPDF.push("");
+                else textOnPDF.push(text.items[0].str);
+                allPages.push(i);
+            }
+            pages = allPages;
+            await loadPage(pages[currentIndex]);
+        }
+
+        loadPDF();
+
+        const back = document.getElementById("backward");
+        const forward = document.getElementById("forward");
+
+        back.onclick = () => {
+            currentIndex = currentIndex - 1 === -1 ? pages.length - 1 : currentIndex - 1;
+            loadPage(pages[currentIndex]);
+        }
+        forward.onclick = () => {
+            currentIndex = currentIndex + 1 === pages.length ? 0 : currentIndex + 1;
+            loadPage(pages[currentIndex]);
+        }
+
+        async function loadPage(pageId) {
+            if (pageId === undefined) pageId = 1;
+            if (pageId > pdf.numPages) pageId = 1;
+            if (pageId < 1) pageId = pdf.numPages;
+
+            const page = await pdf.getPage(pageId);
+
+            const scale = 1.5;
+            const viewport = page.getViewport({scale: scale});
+            const outputScale = window.devicePixelRatio || 1;
+
+            const canvas = document.getElementById("pdf");
+            const context = canvas.getContext("2d");
+
+            canvas.width = Math.floor(viewport.width * outputScale);
+            canvas.height = Math.floor(viewport.height * outputScale);
+            canvas.style.width = Math.floor(viewport.width) + "px";
+            canvas.style.height = Math.floor(viewport.height) + "px";
+
+            const transform  = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
+            const renderContext = {
+                canvasContext: context,
+                transform: transform,
+                viewport: viewport
+            };
+            page.render(renderContext);
+            site.innerText = pageId;
+        }
+
+        const search = document.getElementById("search");
+        search.onchange = async () => {
+            if (search.value === "") pages = allPages;
+            else pages = getAllIndexes(textOnPDF, search.value);
+            if (pages.length > 0) await loadPage(pages[0]);
+
+            console.log(pages);
+        }
+
+        function getAllIndexes(arr, val) {
+            let indexes = [];
+            for(let i = 0; i < arr.length; i++)
+                if (arr[i].includes(val))
+                    indexes.push(i + 1);
+            return indexes;
+        }
+    </script>
+</body>
+</html>