Build a PDF.js Web App to Export All Pages of PDF as PNG Images in Browser Using JavaScript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF to PNG Converter</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
</head>
<body class="bg-gray-100 p-6">

    <div class="max-w-2xl mx-auto bg-white p-6 rounded-md shadow-md">
        <h1 class="text-2xl font-bold mb-4 text-center">PDF to PNG Converter</h1>
        
        <input type="file" id="pdf-file" accept=".pdf" class="border border-gray-300 p-2 rounded w-full mb-4" required>
        
        <button id="convert-pdf" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full mb-4">
            Convert PDF to Images
        </button>
        
        <table class="w-full">
            <thead>
                <tr>
                    <th class="border px-4 py-2">Page</th>
                    <th class="border px-4 py-2">Image Preview</th>
                    <th class="border px-4 py-2">Action</th>
                </tr>
            </thead>
            <tbody id="image-container" class="divide-y divide-gray-300"></tbody>
        </table>
    </div>

    <script>
        document.getElementById('convert-pdf').addEventListener('click', async () => {
            const fileInput = document.getElementById('pdf-file');
            const pdfFile = fileInput.files[0];

            if (!pdfFile) {
                alert("Please upload a PDF file.");
                return;
            }

            const arrayBuffer = await pdfFile.arrayBuffer();
            const pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
            const numPages = pdfDoc.numPages;
            const imageContainer = document.getElementById('image-container');
            imageContainer.innerHTML = ''; // Clear previous images

            for (let i = 1; i <= numPages; i++) {
                const page = await pdfDoc.getPage(i);
                const viewport = page.getViewport({ scale: 2 });
                
                // Create a canvas element for rendering the page
                const canvas = document.createElement('canvas');
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                const context = canvas.getContext('2d');

                // Render the page to the canvas
                await page.render({ canvasContext: context, viewport: viewport }).promise;

                // Create a download button
                const downloadButton = document.createElement('button');
                downloadButton.textContent = `Export Page ${i} as PNG`;
                downloadButton.className = 'bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-2';
                downloadButton.onclick = () => {
                    canvas.toBlob((blob) => {
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = `page-${i}.png`;
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    }, 'image/png');
                };

                // Create a new table row
                const row = document.createElement('tr');
                row.className = 'text-center';
                row.innerHTML = `
                    <td class="border px-4 py-2">Page ${i}</td>
                    <td class="border px-4 py-2"><img src="${canvas.toDataURL()}" alt="Page ${i}" class="max-w-xs" /></td>
                    <td class="border px-4 py-2"></td>
                `;
                row.cells[2].appendChild(downloadButton); // Append the button to the action cell

                // Append the row to the image container
                imageContainer.appendChild(row);
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>PDF to PNG Converter</title>

</head>

<h1 class="text-2xl font-bold mb-4 text-center">PDF to PNG Converter</h1>

Convert PDF to Images

</button>

<thead>

<tr>

<th class="border px-4 py-2">Image Preview</th>

<th class="border px-4 py-2">Action</th>

</tr>

</thead>

</table>

</div>

document.getElementById('convert-pdf').addEventListener('click', async () => {

const fileInput = document.getElementById('pdf-file');

const pdfFile = fileInput.files[0];

if (!pdfFile) {

alert("Please upload a PDF file.");

return;

}

const arrayBuffer = await pdfFile.arrayBuffer();

const pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

const numPages = pdfDoc.numPages;

const imageContainer = document.getElementById('image-container');

imageContainer.innerHTML = ''; // Clear previous images

for (let i = 1; i <= numPages; i++) {

const page = await pdfDoc.getPage(i);

const viewport = page.getViewport({ scale: 2 });

// Create a canvas element for rendering the page

const canvas = document.createElement('canvas');

canvas.width = viewport.width;

canvas.height = viewport.height;

const context = canvas.getContext('2d');

// Render the page to the canvas

await page.render({ canvasContext: context, viewport: viewport }).promise;

// Create a download button

const downloadButton = document.createElement('button');

downloadButton.textContent = `Export Page ${i} as PNG`;

downloadButton.className = 'bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-2';

downloadButton.onclick = () => {

canvas.toBlob((blob) => {

const url = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = url;

a.download = `page-${i}.png`;

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

}, 'image/png');

};

// Create a new table row

const row = document.createElement('tr');

row.className = 'text-center';

row.innerHTML = `

row.cells[2].appendChild(downloadButton); // Append the button to the action cell

// Append the row to the image container

imageContainer.appendChild(row);

}

});

</script>

</body>

</html>

Build a PDF.js Web App to Export All Pages of PDF as PNG Images in Browser Using JavaScript

Comments

Leave a Reply Cancel reply

Archives