<!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>