Creating formatted PDF documents on a mobile device can be difficult. Adding cross-platform to the equation only compounds this challenge. The jsPDF JavaScript library and the associated jsPDF Titanium module provide a robust and pure JavaScript cross-platform approach.
This recipe demonstrates how to create formatted PDF documents, similar to the following screenshot, using a powerful JavaScript API:
This recipe uses the jsPDF module for Titanium to create PDF files. This module and supporting source code can be downloaded from the source code provided by the book, or individually through the links provided in the See also section at the end of this recipe. The installation process for this recipe is straightforward and only requires copying the jsPDFMod folder into the Resources folder of your Titanium project, as shown in the following screenshot:
Once you have added the jsPDFMod folder to your project, you will need to create your application namespaces in the app.js file, and use require to import the module into your code, as the following snippet demonstrates:
//Create our application namespace
var my = {
jsPDF : require('./jsPDFMod/TiJSPDF'),isAndroid : Ti.Platform.osname === 'android'
};This recipe contains a basic UI that allows the user to generate a recipe PDF and open an e-mail dialog.
- Create a
Ti.UI.Windowwindow to hold all UI controls:var win = Ti.UI.createWindow({ backgroundColor: '#eee', title: 'jsPDF Sample',layout:'vertical' }); - Next, the
goButtonbutton is added to the recipe'sTi.UI.Window:var goButton = Ti.UI.createButton({ height: '50dp', title: 'Email a receipt', left:'20dp', right:'20dp', top:'40dp' }); win.add(goButton); - The
goButtonbutton's click event launches the PDF creation process by calling thegeneratePDFExamplemethod:goButton.addEventListener('click', function (e) { generatePDFExample(); });
The following snippet describes how to use generatePDFExample to create a PDF document using the jsPDF module:
function generatePDFExample(){The next line demonstrates how to create a new instance of the jsPDF module. This creates a new virtual PDF document.
var doc = new my.jsPDF();
The following snippet demonstrates how to add document properties to the PDF document object:
doc.setProperties({
title: 'Title', subject: 'This is the subject', author: 'add author', keywords: 'one, two, three', creator: 'your organization'
});The following snippet demonstrates how to embed an image into a PDF document. It is important that the images contain a full native path as shown here, otherwise the document will generate errors on saving:
var imgSample1 = Ti.Filesystem.resourcesDirectory + 'sample_logo.jpg';
doc.addImage(imgSample1, 'JPEG', 10, 20, 35, 17);We then create a header using Helvetica bold and a font size of 32:
doc.setFont("helvetica");
doc.setFontType("bold");
doc.setFontSize(32);
doc.text(20, 50, 'Your Receipt);The following code snippet creates the itemized recipe section with normal font and a size of 18:
doc.setFontType("normal");
doc.setFontSize(18);
doc.text(20, 70, '1. Cargo Container $2399.99'),
doc.text(20, 80, '2. Storage (5 days) $1299.99'),
doc.text(20, 90, '3. Loading Fee $699.99'),
doc.text(20, 100, '4. Transport Insurance $399.99'),A Ti.File
object is created to the location where we wish to save recipe.pdf:
var myFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,'recipe.pdf'),
The Ti.File object is then passed into the jsPDF module's save method. The save method will generate a PDF file with the attributes created earlier:
doc.save(myFile);
The Ti.File reference for the saved PDF file is then provided to Ti.UI.EmailDialog as an attachment and opened, so the user can compose an e-mail:
var emailDialog = Ti.UI.createEmailDialog();
emailDialog.addAttachment(myFile);
emailDialog.open();
};- To learn more about the jsPDF project created by James Hall, please visit the Github repository at https://github.com/MrRio/jsPDF.
- This recipe uses the a Titanium module for jsPDF. Please refer to the following links for additional documentation, samples, and guidance with the module:
Author: Malcolm Hollingsworth
Repository: https://github.com/Core-13
Sponsoring organization: Core13; website: core13.co.uk