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
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.