1. #1
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
    rushi2440 is on a distinguished road

      0  

    Thumbs up Answered: How to download xls file generated by the Jasper Report in extj 4.0.2a

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


    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
    Code:
    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
    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
    Code:
    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

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

    Create frame and download form somewhere.
    Code:
    //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) {
    
                            }
                        });

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

    Create frame and download form somewhere.
    Code:
    //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) {
    
                            }
                        });

  4. #3
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
    rushi2440 is on a distinguished road

      0  

    Default


    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

    Code:
    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

  5. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

    Code:
    var body is Ext.getBody();

  6. #5
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
    rushi2440 is on a distinguished road

      0  

    Default


    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

  7. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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
    Code:
    form: App.downloadForm,

  8. #7
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
    rushi2440 is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread