Convert PDF to image(PNG/JPG) in Javascript

Technical Support Apryse SDK
, ,
1

Hi,

I want to turn a pdf into array of images(multiple pages pdf) using plain javascript. If the user uploads a pdf, I’m not viewing the pdf i.e not making use of any webviewer, I just want to convert the pdf into a image(png/jpg) in my javascript code by reading the uploaded pdf file.

I have gone through this link but i didn’t get a clear picture as the html contains some kind of logic and various libraries are being imported here.

As part fo this requirement I tried importing script src="…/…/…/lib/core/pdf/PDFNet.js" & script src="…/…/…/lib/core/CoreControls.js" js files into my class and when I try to print PDFNet i see the object getting printed .

Sample Code

            var binary_string = atob(base64data);
            var len = binary_string.length;
            var bytes = new Uint8Array(len);
            for (var i = 0; i < len; i++) {
                bytes[i] = binary_string.charCodeAt(i);
            }
            const main = async() => {
                console.log('Beginning Test');
                const doc = await PDFNet.PDFDoc.createFromBuffer(bytes.buffer);
                doc.initSecurityHandler();
                doc.lock();
                
                console.log('PDFNet and PDF document initialized and locked');
            };

Note : Facing issue with the async or await, code is not entering the async() block and i don’t see any error in the console. What should be done to resolve this issue. Trying out in chrome browser latest version(Version 90.0.4430.212).

TIA

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

This worked fine for me. I tried the following.

  1. Downloaded WebViewer SDK: https://www.pdftron.com/downloads/WebViewer.zip
  2. Unzipped in a folder hosted by my server. In my case, my htdocs folder for my XAMPP server.
  3. Replace the file samples/full-apis/PDFDrawTest/PDFDrawTest.js with the attached one below.
  4. In browser navigate to localhost/yourfolder/samples/full-apis/PDFDrawTest/PDFDrawTest.js
  5. After a moment your browser will download the file atob_test.png

If the above does not work for you, please elaborate, including your full code, so I can review.

PDFDrawText_js.txt (3.4 KB)

4

Hi @Ryan ,

Can you look at my code and let me know why I’m seeing this error

Code

async initializePdftron() {
const pdfNet = window.PDFNet;
console.log('Async-Await started ', pdfNet);  // pdfNet object is getting printed
//Sample PDF in base64 format
var binary_string = atob(
    'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
    'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
    'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
    'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
    'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
    'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
    'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
    'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
    'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
    'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
    'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
    'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
    'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');

var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; ++i) {
    bytes[i] = binary_string.charCodeAt(i);
}

var blob = new Blob([bytes], {
    type: 'application/pdf'
});
var url = URL.createObjectURL(blob); 
console.log('Blob url  ', url);  //blob:https://*.com/5d9870c9-2b98-4697-a7d4-0871c15b5123
try {
    console.log('Beginning Test ', pdfNet.PDFDoc);  // Beginning Test  ƒ (id){this.name="PDFDoc";this.id=id}
    const doc = await pdfNet.PDFDoc.createFromURL(url);   // **Error with this line**
    console.log('PDFNet and PDF document initialized and locked');
} catch (ex) {
    console.log("Error", ex);
}
}

Error

Error ReferenceError: maxNum is not defined
at checkArguments (PDFTron_PDFNet_JS:1097)
at Function.PDFNet.PDFDoc.createFromBuffer (PDFTron_PDFNet_JS:800)
at eval (PDFTron_PDFNet_JS:1131)
at async b.initializePdftron