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 https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git[/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:
[js]//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 );
});[/js]
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.