Loading is not ending on the browser after dowloading the Excel file

259 views Asked by At

I am using grid view to export data into Excel.

All of the data is getting exported into Excel.

But after exporting to Excel, excelsheet directly opens into the Excel, and in the browser I am getting 'Please wait...' symbol even if Excel is already exported.

This is my code to export data into the Excel:

          var gv = new GridView();
          gv.DataSource = Export_List;                    
          gv.DataBind();
          Response.ClearContent();
          Response.Buffer = true;
          Response.AddHeader("content-disposition", "attachment; filename=export.xls");
          Response.ContentType = "application/ms-excel";
          Response.Charset = "";
          StringWriter stringWriter = new StringWriter();
          HtmlTextWriter htmlTextWriter = new HtmlTextWriter(stringWriter);
          gv.RenderControl(htmlTextWriter);
          Response.Output.Write(stringWriter.ToString());                    
          Response.End();

After exporting to Excel, the excelsheet directly opens in the Excel and in the browser I am getting 'Please wait...' symbol even if Excel is already exported.

This is the code for Loading symbol in _Layout.cshtml

<body  onbeforeunload="LoadSymbol()" onload="UnLoadSymbol()">

    <div id="pgLoad" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
    top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 999999;
    opacity: .6; filter: alpha(opacity=70);display:none">
        <p style="position: absolute; top: 40%; left: 40%; color: White;">
            Please wait...<br>
            <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
        </p>
    </div>
 some code

  <script language="javascript">        
        $("form").submit(function () { $("#pgLoad").show(); });

        document.onreadystatechange = function () {
            var iscomplete= document.readyState
            if (iscomplete== 'complete') {
                $("#pgLoad").hide();
            }
        }

            function LoadSymbol() {
                $("#pgLoad").show();
            }

            function UnLoadSymbol() {
                $("#pgLoad").hide();
            }
  </script>
</body>

and this is the export button

@using (Html.BeginForm())
{
some code
<button type="submit" class="btn btn-primary" name="ExcelButton" value="Download as Excel" id="ExcelButton" > Download as Excel </button>
}                     

How can I get rid of this 'Please wait...' symbol, if excel is already exported?

Why do Excel sheets open directly into Excel after downloading, is there any way to show that downloaded Excel into download bar of Chrome?

1

There are 1 answers

1
Žygimantas Pusvaškis On

your js script doesn't know if export ended or not you need catch the response from your gridview and pass to js.