jsPDF with Cordova - Adding images

Question

I am trying to generate a PDF using the jsPDF library (https://github.com/MrRio/jsPDF) from within a mobile Cordova app. I am currently testing the app on an Android 4.0.4 device but it also needs to run on Windows mobile 8. The text in the PDF document is shown correctly however any images are scrambled. See image below

Image of PDF that was generated

I did find this page (https://coderwall.com/p/nc8hia) that seemed to indicate there is a problem with jsPDF displaying images in Cordova (see comments) but the author never posted the follow-up. Has anyone been able to use jsPDF with Cordova and properly add images to the generated PDF? My code is below, any assistance or advice would be greatly appreciated.

function demoReceipt() {
    var img = new Image();

    img.onError = function() {
        alert('Cannot load image: "' + url + '"');
    };
    img.onload = function() {
        createPdf2(img);
    };
    img.src = 'img/testlogo.png';
}



function createPdf2(myLogo) {
    //  var doc = new jsPDF('p', 'pt', 'jontype');

    var doc = new jsPDF('p', 'pt', 'letter');

    doc.setProperties({
        title : 'Fueling Receipt',
        author : 'Jon Hoffman',
        creater : 'Jon Hoffman'
    });

    doc.addImage(myLogo, 'PNG', 5, 5, 140, 30);
    doc.setFontSize(12);
    doc.text(10, 40, 'Sample PDF receipt');
    doc.setFontSize(8);
    doc.text(10, 45, 'Smaller text - new');

    var pdfOutput = doc.output();

    //NEXT SAVE IT TO THE DEVICE'S LOCAL FILE SYSTEM
    //Requires  cordova plugin add org.apache.cordova.file
    console.log("file system...");
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {

        console.log(fileSystem.name);
        console.log(fileSystem.root.name);
        console.log(fileSystem.root.fullPath);

        fileSystem.root.getDirectory("myPDFs", {
            create : true,
            exclusive : false
        }, function(dir) {

            fileSystem.root.getFile("myPDFs/test.pdf", {
                create : true
            }, function(entry) {
                var fileEntry = entry;
                console.log(entry);

                entry.createWriter(function(writer) {
                    writer.onwrite = function(evt) {
                        console.log("write success");
                    };

                    console.log("writing to file");
                    writer.write(pdfOutput);
                }, function(error) {
                    console.log(error);
                });

            }, function(error) {
                console.log(error);
            });
        }, function(error) {
        });
    }, function(event) {
        console.log(evt.target.error.code);
    });
}

Jon H Jon H · Accepted Answer · 2014-03-24T13:18:47

I solved the issue with help from this blog post: https://coderwall.com/p/nc8hia. There does seems to be significant differences between the 0.90 version used in that post and the version that I am using from https://github.com/MrRio/jsPDF however the solution is pretty much the same. First off, in the version from MyRio, you can get the PDF generation working without fixing the Blob issue noted in Igor’s post. All you need is to generate the PDF output by calling “doc.ouput()” and then save it using the Cordova filesystem plugin. So I thought I did not have to create the Blob (this is where I was wrong).
Igor (from the coderwall post) responded back to my question with some additional code but when I searched the jspdf.js file from MyRio version, I saw that the code (more compact version) was already in the code on lines 734 – 738:

var data = buildDocument(), len = data.length,
    ab = new ArrayBuffer(len), u8 = new Uint8Array(ab);

while(len--) u8[len] = data.charCodeAt(len);
return new Blob([ab], { type : "application/pdf" });

But I also notice that the blob creation code that Igor fixed in his initial post was at the end of this block of code. So I commented out the “return new Blob([ab], { type : “application/pdf”});” line and put in the following code from Igor’s post with minor variable name changes:

try
{
    var blob = new Blob([ab], {type: "application/pdf"});
    console.debug("case 1");
    return blob;
 }
 catch (e)
 {
     window.BlobBuilder = window.BlobBuilder ||
                                          window.WebKitBlobBuilder ||
                                          window.MozBlobBuilder ||
                                          window.MSBlobBuilder;
     if (e.name == 'TypeError' && window.BlobBuilder)
     {
         var bb = new BlobBuilder();
         bb.append(ab);
         console.debug("case 2");
         return bb.getBlob("application/pdf");

      }
      else if (e.name == "InvalidStateError")
      {
          // InvalidStateError (tested on FF13 WinXP)
          console.debug("case 3");
          return new Blob([ab], {type: "application/pdf"});

       }
       else
       {
           // We're screwed, blob constructor unsupported entirely
           console.debug("Errore");
       }
 }

Then when I generate that pdfOutput, in my code, I changed

var pdfOutput = doc.output();

to

var pdfOutput = doc.output(“blob”);

and it worked. I hope this post is able to help out others experiencing the same issues.

jsPDF with Cordova - Adding images

1 Answers