PDF Flipbook Generator

Embed Code

<!-- PDF Flipbook Embed Code -->
<!-- Include required libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>

<!-- Flipbook container -->
<div id="flipbook-container" style="width: 100%; height: 600px; position: relative;">
    <canvas id="pdfCanvas" style="max-width: 100%; height: auto;"></canvas>
    <div style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px;">
        <button id="prevPage" style="background: transparent; border: 1px solid #FFA500; color: white; padding: 5px 10px; margin: 0 5px; cursor: pointer;">←</button>
        <span id="pageInfo" style="color: white;"></span>
        <button id="nextPage" style="background: transparent; border: 1px solid #FFA500; color: white; padding: 5px 10px; margin: 0 5px; cursor: pointer;">→</button>
    </div>
</div>

<script>
// Initialize PDF.js
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.worker.min.js';

// PDF viewer configuration
const pdfUrl = '${document.getElementById('pdfUrl').value || 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'}';
let pdfDoc = null;
let pageNum = 1;
let pageRendering = false;
let pageNumPending = null;
let scale = 1.5;
let canvas = document.getElementById('pdfCanvas');
let ctx = canvas.getContext('2d');

// Render PDF page
function renderPage(num) {
    pageRendering = true;
    pdfDoc.getPage(num).then((page) => {
        const viewport = page.getViewport({scale: scale});
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
            canvasContext: ctx,
            viewport: viewport
        };

        page.render(renderContext).promise.then(() => {
            pageRendering = false;
            document.getElementById('pageInfo').textContent = `Page ${pageNum} of ${pdfDoc.numPages}`;
            if (pageNumPending !== null) {
                renderPage(pageNumPending);
                pageNumPending = null;
            }
        });
    });
}

// Load PDF
pdfjsLib.getDocument(pdfUrl).promise.then((pdf) => {
    pdfDoc = pdf;
    renderPage(pageNum);
});

// Previous page
document.getElementById('prevPage').onclick = () => {
    if (pageNum <= 1) return;
    pageNum--;
    renderPage(pageNum);
};

// Next page
document.getElementById('nextPage').onclick = () => {
    if (pageNum >= pdfDoc.numPages) return;
    pageNum++;
    renderPage(pageNum);
};

// Touch support
const hammer = new Hammer(canvas);
hammer.on('swipeleft', () => {
    if (pageNum < pdfDoc.numPages) {
        pageNum++;
        renderPage(pageNum);
    }
});
hammer.on('swiperight', () => {
    if (pageNum > 1) {
        pageNum--;
        renderPage(pageNum);
    }
});
</script>
PDF Settings

PDF Title:
Navigation Text Color:
PDF Navigation Color:
/ 14