gmacc-flip-book
v1.0.2
Published
Una librería JavaScript moderna para visualizar documentos PDF en formato flipbook interactivo con animaciones 3D
Downloads
335
Maintainers
german_macchiaReadme
📖 Flipbook
Una librería JavaScript moderna y ligera para visualizar documentos PDF en formato flipbook interactivo con animaciones 3D realistas.
✨ Características
- 🎨 Animaciones 3D realistas - Efecto de volteo de página con perspectiva 3D.
- 🔍 Zoom y Pan - Navegación intuitiva con rueda del mouse, botones dedicados y arrastre fluido.
- � Responsive nativo - Cambio automático entre modo "Spread" (dos páginas) en escritorio y modo "Single Page" en móviles.
- 🛠️ Barra de herramientas integrada - Incluye controles de navegación, contador de páginas, zoom dinámico y menú de compartir.
- � Descarga de PDF - Funcionalidad de descarga integrada.
- 🔗 Menú Social - Compartir directamente en WhatsApp, Facebook, X (Twitter), Instagram o copiar enlace.
- � Carga Dinámica - Capacidad de cargar nuevos archivos PDF sin recargar la instancia.
📦 Instalación
npm install gmacc-flip-book🚀 Uso Rápido
TypeScript / JavaScript
import { Flipbook } from "gmacc-flip-book";
import "gmacc-flip-book/styles";
const flipbook = new Flipbook("book-container", "/mi-documento.pdf", {
onPageChange: (current, total) => {
console.log(`Página actual: ${current}/${total}`);
},
});HTML Directo (como módulo)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Demo Flipbook</title>
<!-- Los estilos se importan automáticamente si usas un bundler,
o puedes referenciar el CSS directamente si es necesario -->
</head>
<body>
<div id="book-container" style="width: 100%; height: 600px;"></div>
<script type="module">
import { Flipbook } from "https://unpkg.com/gmacc-flip-book/dist/lib/index.js";
const fb = new Flipbook("book-container", "/sample.pdf");
</script>
</body>
</html>📚 API
Constructor
new Flipbook(containerId: string, pdfUrl: string, options?: FlipbookOptions)Opciones de Configuración (FlipbookOptions)
| Propiedad | Tipo | Default | Descripción |
| :----------------- | :--------- | :------ | :--------------------------------------------------------------------------- |
| width | number | 600 | Ancho base para el renderizado interno. |
| height | number | 800 | Alto base para el renderizado interno. |
| onPageChange | function | - | Callback ejecutado al cambiar de página. Recibe (currentPage, totalPages). |
| enableDownload | boolean | true | Muestra/Oculta el botón de descarga en la navbar. |
| downloadFileName | string | - | Nombre personalizado para el archivo descargado. |
Métodos Públicos
| Método | Descripción |
| :------------------------ | :--------------------------------------------------- |
| loadNewPDF(url: string) | Reemplaza el PDF actual por uno nuevo dinámicamente. |
| nextPage() | Avanza a la siguiente página. |
| prevPage() | Retrocede a la página anterior. |
| goToFirstPage() | Salta directamente a la primera página. |
| goToLastPage() | Salta directamente a la última página. |
| download() | Dispara la descarga del PDF actual. |
🖱️ Interacciones
- Click en los bordes: Voltear páginas hacia adelante o atrás.
- Rueda del mouse: Control de zoom fino.
- Botones +/-: Zoom en pasos definidos.
- Arrastrar (Drag): Desplazar el libro cuando se tiene zoom aplicado.
- Auto-Ajuste: Al redimensionar la ventana, el libro recalcula su tamaño óptimo para no cortarse.
🛠️ Desarrollo Local
Si deseas contribuir o modificar la librería:
- Clone el repo:
git clone https://github.com/GermanMacchia/flip-book.git - Instale dependencias:
npm install - Inicie el servidor de desarrollo:
npm run dev - Construya la librería:
npm run build:lib
📝 Licencia
Distribuido bajo la licencia MIT. Ver LICENSE para más información.
Hecho con ❤️ por Germán Macchia