How to download xls file generated by the Jasper Report in extj 4.0.2a

[rushi2440]

Hello sencha forum member i need some support from you to generate the excel report and then download it with one click.


I am working on extjs 4.0.2a along with Java. In java framework such as Hibernate/JPA and Spring. I am using Jasper Report to generate the report in excel and pdf. I am able to generate the report using it. But the problem is that I am not able to download it in my browser. Also my browser didn't prompt me to save or cancel the report generated.


I am making request to server to generate the excel report using

Ext.Ajax.request({
   url: 'task/GetTaskReportXLS.action',   
   success : function(response, option){
                    console.log("success");
                }
   ,failure :function(response, option){
                    console.log("failure");
                }
     ,scope : this
        });

on my server side I am generating the excel report with below code

Connection con = (Connection) DriverManager.getConnection("jdbc:mysql://localhost/contact","**","**");


           Map params = getParameters(openSession);
           Date date = new Date();
           OutputStream outputfile = new FileOutputStream(new File("C:\\report\\xls\\JasperReport"+date.getDate()+"-"+date.getMonth()+"-"+date.getYear()+"-"+date.getTime()+".xls"));


           response.setContentType("application/vnd.ms-excel");
           response.setHeader("Content-Disposition","inline; filename=\"gantt.xls\"");            
           response.addHeader("Content-Disposition", "attachment");


          JasperDesign jasperDesign = JRXmlLoader.load(this.getClass().getResourceAsStream("/com/gantt/report/ganttreport.jrxml"));
          JasperReport jasperReport = JasperCompileManager.compileReport(jasperDesign);


          JasperPrint jasperprint = JasperFillManager.fillReport(jasperReport, params,con);


          JRExporter exporterXLS = new JRXlsExporter();         


           exporterXLS.setParameter(JRExporterParameter.JASPER_PRINT, jasperprint);
            exporterXLS.setParameter(JRExporterParameter.OUTPUT_STREAM, outputfile);
            exporterXLS.setParameter(JRXlsAbstractExporterParameter.IS_COLLAPSE_ROW_SPAN, Boolean.TRUE);
            exporterXLS.setParameter(JRXlsAbstractExporterParameter.IS_REMOVE_EMPTY_SPACE_BETWEEN_COLUMNS, Boolean.TRUE);
            exporterXLS.setParameter(JRXlsAbstractExporterParameter.IS_REMOVE_EMPTY_SPACE_BETWEEN_ROWS, Boolean.TRUE);
            exporterXLS.setParameter(JRXlsAbstractExporterParameter.IS_ONE_PAGE_PER_SHEET, Boolean.FALSE);
            exporterXLS.setParameter(JRXlsAbstractExporterParameter.IS_DETECT_CELL_TYPE, Boolean.FALSE);
            exporterXLS.setParameter(JRXlsAbstractExporterParameter.IS_WHITE_PAGE_BACKGROUND, Boolean.FALSE);
            exporterXLS.setParameter(JRXlsAbstractExporterParameter.IS_IGNORE_GRAPHICS, Boolean.TRUE);


            exporterXLS.exportReport();

when i click the export button the process executes and as the response on my firebug console i am getting headers as

Response Headers
Content-Disposition	attachment
Content-Length	0
Content-Type	application/vnd.ms-excel
Date	Fri, 20 Jan 2012 10:00:49 GMT
Server	Apache-Coyote/1.1

but still my download prompt not appear to save my excel report. Help me to point out what things I am doing wrong here.


I am using extjs 4.0.2a mvc architecture with Java.


Yogendra Singh
Sr. Programmer
Kintudesigns.com

[tvanzoelen]

I download my files with a hidden iframe and post a form to it with an Ajax request

Create frame and download form somewhere.

//create the downloadframe at the init of your app
this.downloadFrame = body.createChild({
                tag: 'iframe'
                    , cls: 'x-hidden'
                    , id: 'iframe'
                    , name: 'iframe'
            });
//create the downloadform at the init of your app

            this.downloadForm = body.createChild({
                tag: 'form'
                    , cls: 'x-hidden'
                    , id: 'form'
                    , target: 'iframe'
            });

//then Ajax your pdf on the server and be sure you can reference the downloadForm in the call

var url =  'mypdf.pdf';
        var params = new Object();
       
        Ext.Ajax.request(
                    {
                        url: url,
                        params: params,
                        form: application.downloadForm,
                        isUpload: true,
                        success: function(response, options) {

                        },
                        failure: function(response, options) {

                        }
                    });

[rushi2440]

thanks for your quick response. I tried to do the changes as per you said to me but it gives me error

body is not defined

my app.js is

Ext.onReady(function() {
    Ext.QuickTips.init();
    
    App.init();
});


TaskPriority = {
    Low : 0,
    Normal : 1,
    High : 2
};


App = {


    // Initialize application
    init: function () {
    
    //create the downloadframe at the init of your app
    this.downloadFrame = body.createChild({
                    tag: 'iframe'
                        , cls: 'x-hidden'
                        , id: 'iframe'
                        , name: 'iframe'
                });
    //create the downloadform at the init of your app


                this.downloadForm = body.createChild({
                    tag: 'form'
                        , cls: 'x-hidden'
                        , id: 'form'
                        , target: 'iframe'
                });
      
        var params = new Object();
        
        var g = Ext.create("Gnt.panel.Gantt", {
            height: '100%',
            width: '99%',
            renderTo: Ext.getBody(),
            leftLabelField: 'Name',
            loadMask: true,
            startDate: start,
            endDate: end,
            multiSelect : true,
            cascadeChanges : true,
            viewPreset: 'weekAndDayLetter',
            recalculateParents: false,
            
            // Add some extra functionality
            
            tbar: [{
                    iconCls : 'icon-report',
                    scale : 'large', 
                    text : 'Export to XLS',
                    handler : function(button, event){
                       //code goes here
                       Ext.Ajax.request({
                           url: 'task/GetTaskReportXLS.action',
                           params: params,
                           form: application.downloadForm,
                           isUpload: true,
                          // method: 'POST',                               
                            success : function(response, option){
                                //this.gestioneRisposta(response);
                                  console.log("success");
                            }
                            ,failure :function(response, option){
                                console.log("failure");
                            }
                            ,scope : this
                        });
                  }
                },
                {
                    iconCls : 'icon-pdf',
                    scale : 'large', 
                    text : 'Export to PDF',
                    handler : function(button, event){
                       //code goes here
                       Ext.Ajax.request({
                           url: 'task/GetTaskReportPDF.action',
                           method: 'GET',
                           success: function(response, opts) {
                              var obj = Ext.decode(response.responseText);
                              console.dir(obj);
                           },
                           failure: function(response, opts) {
                              console.log('server-side failure with status code ' + response.status);
                           }
                        });
                      
                  }
                },
                {
                    iconCls : 'icon-html',
                    scale : 'large', 
                    text : 'Export to HTML',
                    handler : function(button, event){
                       //code goes here
                       Ext.Ajax.request({
                           url: 'task/GetTaskReportHTML.action',
                           method: 'GET'
                           /*success: function(response, opts) {
                              var obj = Ext.decode(response.responseText);
                              console.dir(obj);
                           },
                           failure: function(response, opts) {
                              console.log('server-side failure with status code ' + response.status);
                           }*/
                        });
                  }
                },
                '->',
                {
                    iconCls : 'icon-print',
                    scale : 'large', 
                    text : 'Print',
                    handler : function() {
                        // Make sure this fits horizontally on one page.
                        g.zoomToFit();
                        g.print();
                    }
                }
            ]
        });
    }
};

Yogendra Singh
Sr. Programmer
Kintudesigns.com

[tvanzoelen]

Excuse, instantiate body first. body is Ext.getBody()

var body is Ext.getBody();

[rushi2440]

thanks for the reply.

one more question what's the application in your code ?? firebug gives me an error
application is not defined


Yogendra Singh
Sr. Programmer
Kintudesigns.com

[tvanzoelen]

thats the reference to the downLoadForm. In my case it was in the application scope maybe in yours App.downLoadForm


Below must be the reference to the downLoadForm

Try

form: App.downloadForm,

[rushi2440]

thanks a lot.. It working now. I get the window to save my report. but the excel report generated is empty and also the name is some junk value.

also my server doesn't execute the method that generates the report . actually i think the problem is with the url. So how to execute my server side function, without it i am not able to make my excel report.


Yogendra Singh
Sr. Programmer
Kintudesigns.com