Generating a PDF Inside of a PhoneGap App

A while back, I was asked if it’s possible to generate PDF documents inside of PhoneGap apps… The answer is definitely yes, and it’s not that hard at all!  I used the JSPDF library, which has a comprehensive JavaScript API for generating PDF documents.

Here’s a quick and easy sample…

First, create a new PhoneGap project using the command line tools, and add the console output and file writer plugins:

[code]phonegap create . "jspdf.sample" "JSPDF App"
phonegap local plugin add org.apache.cordova.file
phonegap local plugin add[/code]

Next, download the JSPDF project code, and copy the jspdf library from the “dist” directory into your PhoneGap project.  I put it into the www/js directory.  Then, be sure to include the library inside of your main HTML file.

[html]<script type="text/javascript" src="js/jspdf.source.js"></script>[/html]

I used the uncompressed/minified source file in the “dist” directory.

Now, let’s generate a PDF document.  Here’s a code snippet that will generate a very simple PDF document and save it to the local file system on the device using PhoneGap’s File API.  This must be called *AFTER* the deviceready event.  All of the console.log statements are just used for debugging this snippet:

console.log("generating pdf…");
var doc = new jsPDF();

doc.text(20, 20, ‘HELLO!’);

doc.text(20, 30, ‘This is a PDF document generated using JSPDF.’);
doc.text(20, 50, ‘YES, Inside of PhoneGap!’);

var pdfOutput = doc.output();
console.log( pdfOutput );

console.log("file system…");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {


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

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

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

}, function(error){
console.log( );

Notice that the PDF generation is actually the easy part.  Once you have created the document, you can get a string representation of the document using the doc.output() function, and with that you can do whatever you want with it.  You can save it to the local file system like I did, send it to a server, or even send it to a native PDF reader on the device.

Be sure to check out the JSPDF open source project on GitHub and review the docs and online examples for more details.

You can download the sample PDF here that was generated from this code snippet.

  • realtebo

    Wow … a open source code that I’ll read from start to end, byte-by-byte ! Thanks !

  • Prathamesh Talathi

    Hello Thanks, I have followed all above steps, pdf file created on phone storage successfully
    but with no data(size = 0). So not able to open file on device

    • Andrew Trice

      Have you tried writing the doc output to the debug console to make sure that the document was successfully created? If you still run into problems, try reaching out to the JSPDF authors (see the “Need Help” section of this url: )

  • Manos Koufakis

    Thanks for the cool article. I’ve been using jsPDF for more than 1 year but it still misses the most basic functionality in my opinion. You can ONLY create pdf files with ASCII characters. There is no support for UTF-8. There’s an open issue at GitHub on supporting UTF-8 characters but seems like there is no further development of the library for quite some time…. any recommendation of other similar libraries that support UTF-8 characters?

    • Itamar

      Hi Manos ,
      have you find any similar libraries that support UTF-8 characters?

  • Minhaj Sabri

    Thanks for article. Can you please tell how to add an image.

  • kumar

    Hi, Thanks for the article. Now I want to access the file which has been created i.e. test.pdf how can I access this file? basically as soon as pdf is generated I want to send an email or just want this file to pop up and show to user, request you to please help

  • Abo

    Hi, i used jspdf inside ios phonegap.
    I generate a pdf in filesystem , it’s possible to open it in ibooks or adobe or safari , for show it to the user ? Thank’s

  • André Etienne


    I’m trying to get this to work with generating a pdf using jspdf’s from html function. Every time it saves and I open the PDF it says that the pdf is invalid

    • kurthybela

      Hi. Did You solve this invalid issue?

  • Surya Kiran

    Thanks for this article…it helped alot.
    But i am unable to write image inside pdf.
    Could anyone please help me regarding writting image in pdf.

  • Silas Garrison

    /* …starting from line 14 of the example above */

    // Parts of this are barrowed from the “output” method within jsPDF
    // Search for case ‘save’: (line 955 of current non-minified version)

    var length = pdfOutput.length,
    arrBuffer = new Uint8Array(new ArrayBuffer(length)),
    i = 0;

    for (; i < length; i++) {
    arrBuffer[i] = data.charCodeAt(i);

    // Overwrite the output variable with a blob
    pdfOutput = new Blob([array], {type: "application/pdf"});

    /* continue with code as it is from line 15 onward… */

  • Pietro Bertini

    Thank you so much for this useful tut!
    I have a question: I tried several times to compile the app under Xcode, I did not get any error but I cannot find where the pdf has been stored.
    Under iPhone Simulator Library I found a .tmp folder but it is empty.
    Can you help me?
    Thank you.

  • Daniel

    I need to open doc.output() in a pdf reader in Windows8. Any ideas?

  • Fábio Braglin

    Hello, I’m trying to save an pdf file with special char (like Ç – ã), how can I setting it?

  • khadorkovski

    Hi Andrew , very useful help. You said :’ You can save it to the local file system…….., or even send it to a native PDF reader on the device.’ I would really like to know how we should do it using phonegap. Did you mean stream by web ?
    Really thanks for your work

  • erumhannan

    i m getting this error can someone pls tell me why its happening 04-15 13:18:23.701: I/chromium(14520): [INFO:CONSOLE(66)] “Uncaught ReferenceError: LocalFileSystem is not defined”, source: file:///android_asset/index.html (66) and the error is at this line window.requestFileSystem(LocalFileSystem.PERSISTENT,

    • Raj

      Hi erumhannan,
      I am also get same issue,thought you had a solution. how to resolve?

  • Kapil Karda

    hello its nice but how to call HTML content in the doc.text ?

  • Yamini Sontakke

    This code isnt working in my cordova android application can you help me I m working in mvc

    Installed cordova file and file transfer plugins also

  • Muhammad Rauuf

    I have followed your tutorial, but my button doesn’t do anything. i have added alert above my pdf code, the alert works fine. but my pdf code still not works.

  • Richard Diogo

    Hi, I can not find the file

    The application makes the whole process

    alert(“write success”)

    • vidhya m

      hi were you able to solve this issue? I too am not able to find the file

      • Richard Diogo

        No ;{

  • Raj

    I am getting Blob data type from service then using the code line#17,but i am getting even cordova-file,cordova-file-transfer plugins installed on ionic project
    Error: LocalFileSystem is not defined

  • Gauri Jadhav

    The file created is corrupt format. I cannot view using any pdf viewer.Any solution?