144 lines
4.4 KiB
HTML
144 lines
4.4 KiB
HTML
<!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> |