DEV Community

Hanzla Baig
Hanzla Baig

Posted on

6 2 2 2 2

Make PDF to Images converter in html, css, and, java, bootstrap and jquery

Advanced and Fully Functional PDF to Image Converter:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF to Image Converter</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(to right, #1f4037, #99f2c8);
            color: white;
            font-family: 'Poppins', sans-serif;
            padding: 20px;
        }

        .container {
            margin-top: 50px;
        }

        .converter-box {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        .header {
            font-size: 34px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .upload-btn,
        .convert-btn {
            background-color: #ff7f50;
            color: white;
            padding: 12px 35px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            margin: 15px 5px;
            transition: background-color 0.3s ease-in-out, transform 0.2s;
        }

        .upload-btn:hover,
        .convert-btn:hover {
            background-color: #ff6347;
            transform: scale(1.05);
        }

        .output-images {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .output-images img {
            max-width: 100%;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="converter-box">
            <div class="header">PDF to Image Converter</div>
            <input type="file" id="pdfFile" accept="application/pdf" class="upload-btn">
            <button class="convert-btn" id="convertBtn">Convert PDF</button>
            <div class="output-images" id="output"></div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
    <script>
        $('#convertBtn').on('click', function () {
            var fileInput = document.getElementById('pdfFile');
            var file = fileInput.files[0];
            if (file && file.type === "application/pdf") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var pdfData = new Uint8Array(e.target.result);
                    pdfjsLib.getDocument({ data: pdfData }).promise.then(function (pdf) {
                        var outputDiv = $('#output');
                        outputDiv.html(''); // Clear previous images

                        function renderPage(pageNumber) {
                            pdf.getPage(pageNumber).then(function (page) {
                                var viewport = page.getViewport({ scale: 2 });
                                var canvas = document.createElement('canvas');
                                var context = canvas.getContext('2d');
                                canvas.height = viewport.height;
                                canvas.width = viewport.width;

                                page.render({
                                    canvasContext: context,
                                    viewport: viewport
                                }).promise.then(function () {
                                    var img = document.createElement('img');
                                    img.src = canvas.toDataURL('image/png');
                                    outputDiv.append(img);

                                    if (pageNumber < pdf.numPages) {
                                        renderPage(pageNumber + 1);
                                    }
                                });
                            });
                        }

                        renderPage(1);
                    }).catch(function (error) {
                        alert('Error processing PDF: ' + error.message);
                    });
                };
                reader.readAsArrayBuffer(file);
            } else {
                alert("Please upload a valid PDF file.");
            }
        });
    </script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Key Improvements:

  1. Sequential Rendering: Each page of the PDF is processed in order, ensuring that images are displayed sequentially.
  2. Enhanced UI/UX: Added smooth transitions, animations, and better visual feedback to make the interface more appealing and user-friendly.
  3. Robust Error Handling: Alerts are shown for any errors in processing, ensuring the user is informed about issues.
  4. High-Resolution Output: The images are rendered with a higher scale (2x) for better clarity.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay