CODEWITHSUNDEEP
javascriptc#extjs
Vikas Hire
Vikas Hire

Reputation: 628

How to download Excel file in Sencha/Ext JS?

Having trouble saving Excel file in Exjs on the browser side.

Below is my C# code to provide a response to extJS App as an Excel File.

I convert my Excel data table e using C# code and exportToExcel() function returns the Excel file as response to ext JS application request.

 public void exportToExcel(string userAutoId)
    {
        DataTable dt = new DataTable();
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString);
        con.Open();
        SqlDataAdapter da = new SqlDataAdapter("getContacts", con);
        da.SelectCommand.CommandType = CommandType.StoredProcedure;
        da.SelectCommand.Parameters.AddWithValue("@userAutoId", userAutoId);
        //cmd.Parameters.Add("@retValue", System.Data.SqlDbType.VarChar).Direction = System.Data.ParameterDirection.ReturnValue; 
        da.Fill(dt);

        //Create a dummy GridView
        GridView GridView1 = new GridView();
        GridView1.AllowPaging = false;
        GridView1.DataSource = dt;
        GridView1.DataBind();

        Response.Clear();
        Response.Buffer = true;
        Response.AddHeader("content-disposition",
         "attachment;filename=DataTable.xls");
        Response.Charset = "";
        Response.ContentType = "application/vnd.ms-excel";
        StringWriter sw = new StringWriter();
        HtmlTextWriter hw = new HtmlTextWriter(sw);

        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            //Apply text style to each Row
            GridView1.Rows[i].Attributes.Add("class", "textmode");
        }
        GridView1.RenderControl(hw);

        //style to format numbers to string
        string style = @"<style> .textmode { mso-number-format:\@; } </style>";
        Response.Write(style);
        Response.Output.Write(sw.ToString());
        Response.Flush();
        Response.End();
    }

And this is my Ext JS code

                handler: function () {
                    //me = this;
                    var hfUserAutoId = me.InfoPanel.getForm().findField('hfUserAutoId').getValue();

                    var form = me.InfoPanel.getForm();
                    if (form.isValid()) {
                        form.submit({
                            url: 'getCSV.aspx',
                            method: 'POST',
                            params: { "userAutoId": hfUserAutoId },
                            waitMsg: 'Downloading your File...',
                            success: function (fp, o) {

                                                // Heare I want to do code for download respoce file

                                me.fireEvent('CloseThisEx');

                            }
                        });
                    }
                }

            }

Upvotes: 2

Views: 2463

Answers (1)

Federico Baron
Federico Baron

Reputation: 997

You should use the browser download capability using window.open. The C# route must have GET method so the userAutoId and form values should become query params, then the ExtJS code will be:

            handler: function () {
                var hfUserAutoId = me.InfoPanel.getForm().findField('hfUserAutoId').getValue(),
                    form = me.InfoPanel.getForm();

                if (form.isValid()) {
                    var params = Ext.merge(form.getValues(), {userAutoId: hfUserAutoId});
                    window.open('getCSV.aspx?' + Ext.Object.toQueryString(params), '_blank')
                }
            }

Upvotes: 1

Related Questions