Last Updated: September 09, 2019
·
13.14K
· cauchyriemann

Making work cordova/phonegap + jsPDF

Spend some time to integrate those things together, in other words to generate pdf in javascript and save it to filesystem.

Actually there is nothing hard, but I will describe how you can make it work. Hope this will save somebody's time.

At first you need to add to cordova FileSystem plugin. It's can be easily done with command line:

cordova plugin add org.apache.cordova.file

Also you need to patch jsPDF (I'm talking about version 0.9.0), because it doesn't work on android with default blob creation.
You need to replace commented line with following code (thanks to stackoverflow answer http://stackoverflow.com/questions/18596005/generate-client-side-pdf-with-jspdf-on-phonegap-based-apps):

//                    blob = new Blob([array], {type: "application/pdf"});

try
{
    blob = new Blob([array], {type: "application/pdf"});
    console.debug("case 1");
 }
 catch (e)
 {
     window.BlobBuilder = window.BlobBuilder ||
                                          window.WebKitBlobBuilder ||
                                          window.MozBlobBuilder ||
                                          window.MSBlobBuilder;
     if (e.name == 'TypeError' && window.BlobBuilder)
     {
         var bb = new BlobBuilder();
         bb.append(data);
         blob = bb.getBlob("application/pdf");
         console.debug("case 2");
      }
      else if (e.name == "InvalidStateError")
      {
          // InvalidStateError (tested on FF13 WinXP)
          blob = new Blob([array], {type: "application/pdf"});
          console.debug("case 3");
       }
       else
       {
           // We're screwed, blob constructor unsupported entirely
           console.debug("Errore");
       }
 }

And the last step will be actually generate and save created file!

// Somewhere in your code
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

function gotFS(fileSystem) {
    fileSystem.root.getFile("test.pdf", {create: true, exclusive: false}, gotFileEntry, fail);
}

function gotFileEntry(fileEntry) {
    fileEntry.createWriter(gotFileWriter, fail);
}

function gotFileWriter(writer) {
    var doc = new jsPDF();
    doc.setFontSize(14);

    doc.text(20, 20, 'Hello world!');
    writer.write(doc.output());
}

UPDATE 21.03.2014
Last version was producing corrupted PDF, below is updated code which works properly with images using jsPDF.

var sourcer = $('#imageForDocument');

function writeReport(doc) {
    var data = doc.output();
    var buffer = new ArrayBuffer(data.length);
    var array = new Uint8Array(buffer);
    for (var i = 0; i < data.length; i++) {
        array[i] = data.charCodeAt(i);
    }
    writer.write(buffer);
}

if ($("#doclogo").length > 0) {

    window.canvasplugin(sourcer.attr('src'), function (val) {
        var doc = makePdfReport(val);
        writeReport(doc);
    });
}

12 Responses
Add your response

Hi,
Have you tried it on android phonegap ? does it create PDF file ? because I want to know how does writting of PDF header takes place (buildDocument()) in your solution?

-Thanks
Vinod Maralad

over 1 year ago ·

Hi. I'm using cordova, I'm pretty sure it will be the same with phonegap. PDF file looks valid, and opened with mac os preview and adobe reader. Seems that jspdf generates header by himself. Also the problem can be that you have to be sure that there are no errors in JS which generates PDF.

over 1 year ago ·

Be careful - there is problem when inserting images in PDF. it won't work, I have a workaround. Will post it later

over 1 year ago ·

Have you posted the work around? I am unable to find it and trying to generate a PDF with an image. Any help would be appreciated.

over 1 year ago ·

Hi Jon! I've updated article, please check it!

over 1 year ago ·

Thanks for the response back. I am using the jsPDF version from MrRio, located here: https://github.com/MrRio/jsPDF and noticed that the update you posted was already in the code however it did point me to the issue. I noted the issue and my fix here: http://stackoverflow.com/questions/22564617/jspdf-with-cordova-adding-images
Thanks again for the help.

over 1 year ago ·

Yeah. It was done 4 months ago. so most likely the library was updated already. But for me this solution worked fine. Glad to help!

over 1 year ago ·

Hello can u give example full for jspdf ...

over 1 year ago ·

I'm sorry if is a stupid question (I'm new to javascript), but what does #doclogo is used for and what kind of element is it? sorry, just cannot understand.

over 1 year ago ·

doclogo - is a jquery selector for your image. you can use any other selector you want.

over 1 year ago ·

Hi ,
need help in writing arraybuffer object to pdf/image file .
able to add text to pdf but not arraybuffer data .

over 1 year ago ·

I am trying to create the pdf my current view onclick of button but it is not giving error nor alert ..can anyone help

I have included the following plugins using CLI
file
file transfer
fileopener

the current version m using is cordova 5.4.1

over 1 year ago ·