Introduction
In this tip, we will see how we can customize the DataTables
plug-in of jQuery to add our custom header and footer in the PDF. We can add plain text or image as a header same as footer of the PDF. DataTables
is a very powerful plug-in that enables you to quickly and easily enhance your tables and it provides an awesome feature to generate PDF, CSV and Excel file at client side. By default, simple PDF is generated by DataTables
but if you want to show any image/company logo as PDF header and any disclaimers as footer, then this facility is not provided by DataTables
and this is very important to show images/logo in the PDF file.
Before starting this, I am assuming that you are well versed with DataTables
, if not then you can visit a very awesome article written by Jovan Popovic at http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl.
DataTables
internal usages .swf file and this .swf file contains the ActionScript
code to generate PDF/CSV/Excel file so if we want to add our custom images/disclaimers, then we need to modify the ActionScript
code. Following things are required to start:
- Adobe Flex 4.6 SDK
- Any text editor like NotePad++ or Adobe Flash Builder 4.6
- ActionScript code file that is used by
DataTables
Using the Code
After gathering all the required files, lets start's with the code. First, we will modify the ActionScript
code and will generate the swf file for us to use with DataTables
plug-in.
Open the "ZeroClipboardPdf.as" file using any text editor or using Adobe Flash Builder 4.6. In this example, we are using NotePad++ to modify the "ZeroClipboardPdf.as" file. When you open "ZeroClipboardPdf.as" in NotePad++, you will see all the ActionScript
code that is used to generate PDF files at client side. It is not required to be a good programmer to understand the ActionScript code, an average programmer can also understand it. In the ZeroClipboardPdf.as file, you will find a private
function "configPdf
" like below:
private function configPdf():PDF
{
var
pdf:PDF,
i:int, iLen:int,
splitText:Array = clipText.split("--/TableToolsOpts--\n"),
opts:Array = splitText[0].split("\n"),
dataIn:Array = splitText[1].split("\n"),
aColRatio:Array = getProp( 'colWidth', opts ).split('\t'),
title:String = getProp( 'title', opts ),
message:String = getProp( 'message', opts ),
...
In the above code, we are accessing the values of all the properties that are used for PDF generation and these values are passing from JavaScript. So here, we will also add new properties for header and footer and the values of the same will pass from JavaScript. For example, below is the modified code after adding 2 new properties, i.e., headerImage
and footerMessage
.
private function configPdf():PDF
{
var
pdf:PDF,
i:int, iLen:int,
splitText:Array = clipText.split("--/TableToolsOpts--\n"),
opts:Array = splitText[0].split("\n"),
dataIn:Array = splitText[1].split("\n"),
aColRatio:Array = getProp( 'colWidth', opts ).split('\t'),
title:String = getProp( 'title', opts ),
message:String = getProp( 'message', opts ),
headerImage:String = getProp( 'imageData', opts ),
footerMessage:String = getProp( 'footerMessage', opts ),
...
Here, headerImage
will store the base64 string
value of header image (as of now, you need to use only JPG images no other formats are supported due to background transparency issue.) and footerMessage
will store the footer disclaimer text.
After the above code, you will find the below code in "ZeroClipboardPdf.as" file.
pdf = new PDF( Orientation[orientation.toUpperCase()],
Unit.MM, Size[size.toUpperCase()] );
pdf.setDisplayMode( Display.FULL_WIDTH );
pdf.addPage();
iPageWidth = pdf.getCurrentPage().w-20;
pdf.textStyle( new RGBColor(0), 1 );
This is the starting code to generate PDF, after this code, you can add your own code to add the header image. First, import the following namespace, then add the following code in your ActionScript file.
import mx.utils.Base64Decoder;
if ( headerImage != "" )
{
var decoder:Base64Decoder = new Base64Decoder();
decoder.decode(headerImage);
var ba:ByteArray = decoder.toByteArray();
pdf.addImageStream(ba,"DeviceRGB",null,0,0,
iPageWidth,35,0,1,"Normal",null);
}
pdf.setFont( new CoreFont(FontFamily.HELVETICA), 14 );
if ( title != "" )
{
pdf.writeText(11, title+"\n");
}
This code will add an image in the PDF. You can check the AlivePDF documentation for more options/high resolution images, full PDF documentation is available at http://alivepdf.bytearray.org/alivepdf-asdoc/org/alivepdf/pdf/PDF.html.
Now, it's time to add footer text, for this, you need to find the below code in ZeroClipboardPdf.as file.
var grid:Grid = new Grid(
dataOut,
iPageWidth,
100,
new RGBColor (0xE0E0E0),
new RGBColor (0xFFFFFF),
true,
new RGBColor ( 0x0 ),
.1,
null,
columns
);
pdf.addGrid( grid, 0, y, true );
The above code is creating a grid with the table data provided from JavaScript and adding this grid to PDF object. After this, we can add our code for footer, like below:
pdf.newLine(20);
pdf.setFont( new CoreFont(FontFamily.HELVETICA), 6 );
pdf.textStyle( new RGBColor(0xB3B3B3), 1 );
if ( footerMessage != "" )
{
pdf.writeText(3, footerMessage+"\n");
}
Now, it's time to compile this ActionScript file and generate swf file for our use. Follow the steps given below:
mxmlc -static-link-runtime-shared-libraries=true
-library-path=C:\flex_sdk_4.6\frameworks\libs ZeroClipboard.as
- Extract the Flex sdk at C:\flex_sdk_4.6
- CopyZeroClipboardPdf.as to C:\flex_sdk_4.6\bin directory and AlivePdf.swc to C:\flex_sdk_4.6\frameworks\libs directory.
- Open command prompt under the path C:\flex_sdk_4.6\bin
- Execute the compile command
- After compiling, you will get a swf file at location: C:\flex_sdk_4.6\bin\ZeroClipboard.swf
- Now you can use this newly generated swf file with your
DataTables
You can set the swf file path in your JavaScript like below:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'T<"clear">lfrtip',
tableTools: {
"sSwfPath": "../swf/copy_csv_xls_pdf.swf"
}
} );
} );
Now, you need to override the click event of PDF button because we need to pass the 2 extra parameters which we used in ActionScript file, i.e., headerImage
and footerMessage
. Below is the code snippet:
var tableTools = new $.fn.dataTable.TableTools(table, {
"aButtons": [{
"sExtends": "collection",
"sButtonText": "Download Reports",
"aButtons": [{
"sExtends": "csv",
"sButtonText": "Download as CSV",
"sFileName": "Result.csv"
},
{
"sExtends": "pdf",
"sButtonText": "Download as PDF",
"sFileName": "Result.pdf",
"sNewLine": "\n",
"fnClick": function (nButton, oConfig, flash) {
this.fnSetText(flash, "title:" + this.fnGetTitle(oConfig) + "\n"
+ "footerMessage:" +
"This will be our disclaimer Text. We can add very long text also" +
"\n"
+ "headerImage:" +
"/9j/4AAQSkZJRgABAQEAlgCWAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyIoLTkwKCo......" +
"\n"
+ "colWidth:" + this.fnCalcColRatios(oConfig) + "\n"
+ "orientation:" + oConfig.sPdfOrientation + "\n"
+ "size:" + oConfig.sPdfSize + "\n"
+ "--/TableToolsOpts--\n" + this.fnGetTableData(oConfig));
}
}]
},
{
"sExtends": "print",
"sButtonText": "Print This Report"
}]
});
In the above code snippet, we are overriding the click event of PDF by passing 2 extra parameters. You can use any online tool to convert image to base64 string
or you can write any server side or client side code for this.
Points of Interest
JavaScript library can greatly simplify HTML manipulation. It is an amazing framework! and AlivePDF, a very useful ActionScript3
library for PDF generation at client side. It is simply awesome.