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:

phonegap create . "jspdf.sample" "JSPDF App"
phonegap local plugin add org.apache.cordova.file
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

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.

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

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:

//FIRST GENERATE THE PDF DOCUMENT
console.log("generating pdf...");
var doc = new jsPDF();

doc.text(20, 20, 'HELLO!');

doc.setFont("courier");
doc.setFontType("normal");
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 );

//NEXT SAVE IT TO THE DEVICE'S LOCAL FILE SYSTEM
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.getFile("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(event){
 console.log( evt.target.error.code );
});

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

    • http://tricedesigns.com/ 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: http://parall.ax/products/jspdf )

  • 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?

  • 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

    Hi,

    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

  • Surya Kiran

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