Javascript PDF.js Project to Convert All PDF Document Pages to JPG Images in Browser

Welcome folks today in this blog post we will be converting all pdf document pages to jpg images in browser using pdf.js library in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>

<head>
    <title>PDF to Image Converter</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <input type="file" class="form-control" id="fileInput" accept=".pdf">
        </div>
        <table class="table table-striped" id="pageTable"></table>
    </div>
    <script>
        // initialize PDF.js
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.worker.min.js';

        // get file input element
        const fileInput = document.getElementById('fileInput');

        // add event listener to file input
        fileInput.addEventListener('change', function (e) {
            const file = e.target.files[0];

            // read file with FileReader
            const reader = new FileReader();
            reader.onload = function () {
                const typedArray = new Uint8Array(this.result);

                // load PDF with PDF.js
                pdfjsLib.getDocument(typedArray).promise.then(function (pdf) {
                    const numPages = pdf.numPages;

                    // create table header
                    const table = document.getElementById('pageTable');
                    const header = table.createTHead().insertRow();
                    header.insertCell().appendChild(document.createTextNode('Page Number'));
                    header.insertCell().appendChild(document.createTextNode('Download'));

                    // create table rows for each page
                    for (let i = 1; i <= numPages; i++) {
                        const row = table.insertRow();
                        row.insertCell().appendChild(document.createTextNode(i));
                        const downloadButton = document.createElement('button');
                        downloadButton.textContent = 'Download';
                        downloadButton.addEventListener('click', function () {
                            // convert page to image and download
                            pdf.getPage(i).then(function (page) {
                                const canvas = document.createElement('canvas');
                                const viewport = page.getViewport({ scale: 1 });
                                const ctx = canvas.getContext('2d');
                                canvas.width = viewport.width;
                                canvas.height = viewport.height;

                                const renderContext = {
                                    canvasContext: ctx,
                                    viewport: viewport
                                };
                                page.render(renderContext).promise.then(function () {
                                    canvas.toBlob(function (blob) {
                                        const link = document.createElement('a');
                                        link.download = 'page-' + i + '.jpg';
                                        link.href = URL.createObjectURL(blob);
                                        link.click();
                                    }, 'image/jpeg');
                                });
                            });
                        });
                        row.insertCell().appendChild(downloadButton);
                    }
                });
            };
            reader.readAsArrayBuffer(file);
        });
    </script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>PDF to Image Converter</title>

</head>

<body>

</div>

</div>

// initialize PDF.js

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.worker.min.js';

// get file input element

const fileInput = document.getElementById('fileInput');

// add event listener to file input

fileInput.addEventListener('change', function (e) {

const file = e.target.files[0];

// read file with FileReader

const reader = new FileReader();

reader.onload = function () {

const typedArray = new Uint8Array(this.result);

// load PDF with PDF.js

pdfjsLib.getDocument(typedArray).promise.then(function (pdf) {

const numPages = pdf.numPages;

// create table header

const table = document.getElementById('pageTable');

const header = table.createTHead().insertRow();

header.insertCell().appendChild(document.createTextNode('Page Number'));

header.insertCell().appendChild(document.createTextNode('Download'));

// create table rows for each page

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

const row = table.insertRow();

row.insertCell().appendChild(document.createTextNode(i));

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

downloadButton.textContent = 'Download';

downloadButton.addEventListener('click', function () {

// convert page to image and download

pdf.getPage(i).then(function (page) {

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

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

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

canvas.width = viewport.width;

canvas.height = viewport.height;

const renderContext = {

canvasContext: ctx,

viewport: viewport

};

page.render(renderContext).promise.then(function () {

canvas.toBlob(function (blob) {

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

link.download = 'page-' + i + '.jpg';

link.href = URL.createObjectURL(blob);

link.click();

}, 'image/jpeg');

});

row.insertCell().appendChild(downloadButton);

}

});

};

reader.readAsArrayBuffer(file);

});

</script>

</body>

</html>

As you can see we are loading the bootstrap and pdf.js cdn libraries and then we are allowing the user to select the pdf file and then we are showing all the pages alongside with the download button.