Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on May 9, 2023

 

 

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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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>

 

 

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.

 

 

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme