Create Extjs PDF Report

I have been looking for ways to export MySQL data to pdf using ExtJS, and up to this day I haven’t been able to
find a simple solution. I finally came across a project called “PHPJasperXML”, which allows me to access MySQL data, export it to pdf from my ExtJS application, using php and without having to use any javascript.
Albeit, the report isn’t necessarily created by ExtJS, it is extremely easy to create the report and implement this on your ExtJS application.

**** Update May 17th 2011 ****
This is an alternate solution to PHPJasperXML, it uses jasperserver to store the report which can be accessed via its url and you can also use subreports and multiple parameters.

*****************************

I’d like to thank the folks at simit (Ks Tan and Ng Jey Ruey), who wrote the php class we will be using to get this all accomplished. The project (as I mentioned earlier) is called “PHPJasperXML”, and uses their custom written class along with another class called “fpdf” from fpdf.org which allows us to generate PDF files with pure PHP, that is to say, without using the PDFlib library. F from FPDF stands for Free: you may use it on any project and modify it to suit your needs.

Before we proceed, you will need to download both classes (PHPJasperXML contains both in their zip file) (PHPJasperXML and fpdf), and a tool to create the reports. I use iReports, which is a visual report designer, that creates the JRXML file, which is an XML document that contains the definition of the report layout, and this is the file “PHPJasperXML” will use and send to “fpdf” to create our pdf.

OK, now that you have an idea of what’s going on, I can go ahead and show you the files you will need.
This is how we do it:

First create the report using iReport, please follow their tutorials
if you’re not sure how. The folks at simit have also a few tutorials on creating reports using iReports, just scroll down to the bottom of their page.

Once the report has been created, and you have downloaded the classes mentioned earlier, create a folder in your webserver for your project, place the classes in the new folder and make sure it looks similar to this (adjust the path in the examples below to match your configuration). Please note, the files report.jasper and report.jrxml are created by iReport once you save and compile the report.

Next we create our ExtJS app we’ll use to run the report. Our app consists of 6 files, setting.php, index.php, report.php, report.js, report.jasper and report.jrxml. report.js is a simple extjs file which will build the main form with a text field we’ll use to enter the parameter for the report, which was created using iReport. (The other files should be self explanatory, this tutorial assumes you already have ExtJS downloaded and only covers creating the form to run the report, feel free to implement this however other way you see fit. I’m not going to cover how to populate your MySQL db using ExtJS, this was covered in a previous tutorial):

index.php: (include all files we need)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <link rel="stylesheet" type="text/css" href="../javascript/ext-3.3.0/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../javascript/ext-3.3.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../javascript/ext-3.3.0/ext-all.js"></script>
    
    <br>
    
    <script type="text/javascript" src="report.js"></script> 
    
</head>
<body>
</body>
</html>

report.php: (It connects to mysql, loads the jrxml file)

<?php

include_once('class/fpdf/fpdf.php');
include_once("class/PHPJasperXML.inc.php");
include_once ('setting.php');

$cid = $_POST['cid'];

$xml =  simplexml_load_file("report.jrxml"); // This is the name of the report created with iReport


$PHPJasperXML = new PHPJasperXML();
$PHPJasperXML->debugsql=false;
$PHPJasperXML->arrayParameter=array("parameter1"=>$cid);
$PHPJasperXML->xml_dismantle($xml);

$PHPJasperXML->transferDBtoArray($server,$user,$pass,$db);
$PHPJasperXML->outpage("D");    //page output method I:standard output  D:Download file

?>

report.js: (This is our ExtJS form we’ll use to load call the report
Please notice these lines in the file below, it contains the parameter (cid) we’ll be sending to report.jrxml)

/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
Ext.onReady(function(){

   //console.info('Sample Loaded!!!');


    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
   
   
  


    var simple = new Ext.FormPanel({
        labelWidth: 100, // label settings here cascade unless overridden
        frame:true,
        //title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 200},
        defaultType: 'label',
        items: [{
                fieldLabel: 'Enter Parameter',
                name: 'parameter',
                allowBlank:false,
                id: 'pid'
            },{ xtype: 'box',
        	autoEl: { 
			tag: 'div',
		  	cls: 'x-btn',
		 	html: '<form action="report.php" method="post">' +
		 	'<input type="text" name="cid"/>' + 
		 	'<input type="submit" value="Run Report" ' + 
		 	'style="color:#333; font:normal 11px arial,tahoma,verdana,helvetica;" />'
			}
      }
        ]
        
    });

    simple.render(document.body);

   
   
});

setting.php: (Contains our connection params)

<?php
$server="localhost";
$db="phpjasperxml";
$user="username";
$pass="xxxxx";
$version="0.7c";
$pgport=5432;

?>

Once you have created all files above, open your browser and go to your app and see how it works. Here’s a quick video sample of our final project:

You need to install or upgrade Flash Player to view this content, install or upgrade by clicking here.

This is it, I hope this step by step tutorial has helped you some. Thank you for stopping by and please share with others, after all, code should be free.foscode.com | because code should be free

12 thoughts on “Create Extjs PDF Report

  1. @Luis I’m looking into this, it should be back up shortly. Thanks for the heads up.

  2. @Luis The post has been fixed, sorry for any inconvenience this might have caused and again, thank you for bringing this to my attention.

  3. Dan, you converted to the class phpJasperXML Postegresql. In the new version, Version 0.7d?

  4. @Luis This class was developed by simit software. I don’t use psql so I’m not sure how to go about converting the class to support it. However, you could try editing the class so instead of mysql calls, you’d have psql calls. Theoretically it should work. Their site is here and I think there were others with similar usage questions as yours in their forums, and maybe they’ve already come up with a solution . Hope this helps, tenha um bom dia e obrigado novamente por ter vindo ao meu site.

  5. Dan, I’m using the same version of phpJasperXML. Following the same example gives error ” No data found “.
    when I click the run report. Help!!!

  6. @Luis Please make sure all parameters are correct. It appears you are connecting to the database alright, but make sure the parameter name on the php file matches the parameter on your report. The same applies to the file names and paths, make sure they are all correct.

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>