102 lines
3.5 KiB
HTML
102 lines
3.5 KiB
HTML
<!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> |