<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Revista</title>
<style>
body {
margin: 0;
background: #111;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
color: white;
}
h1 {
font-size: 22px;
margin: 20px 0;
}
#book {
width: 90vw;
height: 80vh;
}
.page {
background: white;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.page canvas {
width: 100%;
height: 100%;
object-fit: contain;
}
.controls {
margin: 15px;
}
button {
padding: 10px 18px;
margin: 0 5px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Mi Revista Digital</h1>
<div id="book"></div>
<div class="controls">
<button onclick="pageFlip.flipPrev()">Anterior</button>
<button onclick="pageFlip.flipNext()">Siguiente</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.mjs" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/page-flip.browser.min.js"></script>
<script type="module">
import * as pdfjsLib from "https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.mjs";
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.mjs";
const pdfUrl = "CurriculumVitaeAlondraBagatella.pdf";
const book = document.getElementById("book");
const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i);
const viewport = page.getViewport({ scale: 1.8 });
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = viewport.width;
canvas.height = viewport.height;
await page.render({
canvasContext: context,
viewport: viewport
}).promise;
const pageDiv = document.createElement("div");
pageDiv.className = "page";
pageDiv.appendChild(canvas);
book.appendChild(pageDiv);
}
window.pageFlip = new St.PageFlip(book, {
width: 550,
height: 750,
size: "stretch",
minWidth: 315,
maxWidth: 1000,
minHeight: 420,
maxHeight: 1350,
showCover: true,
mobileScrollSupport: false
});
pageFlip.loadFromHTML(document.querySelectorAll(".page"));
</script>
</body>
</html>