Exporting Excel and PDF files from EXTJS grid.

Hi All,

Sencha EXTJS as you know is a Rich Javascript platform.

Here I will describe how to export Excel and PDF files on the go from EXTJS grid on the client side using Javascript only. Well I know some of you might be aware of this feature but this post might be helpful for many.

Well to begin this tutorial will include simplest ways of achieving the desired output (i.e. generation of Excel and a PDF file.)

A> Generation of Excel file from the grid.

I will assume you have already configured your EXTJS project and everything is working fine.

For genaration of excel from EXTJS grid we would be using     —-    Ext.ux.exporter  with adobe Downloadify  for downloading the file .

1. Download my version of Exporter from SourceForge-> https://sourceforge.net/projects/extjsexcelexport/          >              Files
2. Once you download it, unpack the entire contents in “/extjs/ux”  folder.
3. If you have a parent JSP file or HTML file where you already have included the ext-all-debug.js, include the following entries.              <script type=”text/javascript” src=”extjs/ux/exporter/Exporter.js”></script>
   <script type=”text/javascript” src=”extjs/ux/exporter/swfobject.js”></script>
   <script type=”text/javascript” src=”extjs/ux/exporter/downloadify.min.js”></script>
4. Now, if you have a parent JS file like Application.js include  the following lines at the top                                                             Ext.Loader.setConfig({ enabled : true });
   Ext.Loader.setPath(‘Ext.ux’, ‘extjs/ux’);
5. Once that is done, you can directly use the  Exporter button widget in the docked items of the Grid.{
   xtype: ‘pagingtoolbar’,
   store: ‘MyProject.CountryStore’,
   margin:’0 0 0 10′,
   id :’countryPaging’,
   cls :’paginationToolbar’,
   items: [
   {
   xtype: ‘exporterbutton’
   }]
   }

We are done…Please modify the Worksheet.js file which I have customized as per my project requirements, where in we had to include the search criteria. If you dont need that you can eliminate the buildSearchParams, method. Instead write your own logic here.

 B> Generation of PDF file from the grid.

We will be using JSPDF for this. JSPDF is a third party tool, which is developed by parallax software labs. Though it is stable I could not get it to working for generation of PDF from HTML. It is still in development phase.

JSPDF works with JQuery, EXTJs and Jqeuery usage simultaneously is not recommended in my project.

The only feature of JSPDF that works for me, is normal text generation and drawing lines.

What I did is I converted the Grid data into Arrays, i.e.      gridData = [{[cell1],[cell2]…}, {[cell1],[cell2].. }, … ]  likewise.

Now, iterate the array and manually position the elements into PDF.

var doc = new jsPDF(‘p’, ‘pt’, ‘a1’, true);

Ext.each(data, function(row, i){
       if(countRow%(maxRowsOnPage) == 0 && i != 0 ){

    //adding a new pager after max no. of rows on page         

            doc.addPage();
             pageNo ++;
            countRow = 0;
            doc.setDrawColor(0,0,0);
            doc.line(35, 125, 250*(cols), 125);
       }
       Ext.each(row, function(cell, j){
             doc.text(45+(j*200), 145+(countRow*30), cell ) ;

            //vertical lines
          doc.line(35+(j*200), 125+(countRow*30), 35+(j*200), 155+(countRow*30) );

        }

                      //Last vertical lines
         doc.line(50+((cols+1)*200), 125+(countRow*30), 50+((cols+1)*200), 155+(countRow*30) );
         //row horizontal lines
         doc.line(35, 155+(countRow*30), 250*cols , 155+(countRow*30));
});

 doc.save(‘GridExport.pdf’);

 

You can put this piece of code inside the listener   handler : function() {} of the PDF icon in your paging toolbar.

One more thing for this to work, download jsPDF from gitHub –> https://github.com/MrRio/jsPDF and  only include these two files in your parent JSP, thats it.

 <script type=”text/javascript” src=”extjs/jsPDF/dist/jspdf.debug.js”></script>
<script type=”text/javascript” src=”extjs/jsPDF/jspdf.js”></script>

Hope this solves your problems…keep posting your comments and let me know if this post is of any use to you.

For any queries please write to me on subhadip0608@gmail.com