javascriptasp.netexcelasp.net-coredatatable

Cannot export file on .NET Core application


I'm working with a .NET Core application. I can see the data on the view, but if I try to export this data (in Excel (using closedXML) or csv file), It doesn't works. Checking on devTools there is not problems.

This is the controller, in devTools on the response section I can see the data:

public IActionResult ExportExcel ( DateTime fechaDesde ) 
{
    var builder = new StringBuilder();
    DataTable dt = _conteoFirmasRepository.GetListDT( fechaDesde ); // get data in datatable
    builder.AppendLine( "firmasConsumidas,Flujo,Contacto" );

    foreach ( DataRow item in dt.Rows ) { 
        builder.AppendLine( $"{item["firmasConsumidas"].ToString()},{item["Flujo"].ToString()}, {item["Contacto"].ToString()}");
    }

    return File(Encoding.UTF8.GetBytes( builder.ToString() ), "text/csv", "signatures.csv"); // Problem: NOT returns the file
}

This is the view, button for showing the table works without a problem:

@{
    ViewData["Title"] = "Home Page";
}

<div class="row justify-content-center" >
  <div class="alert alert-primary" role="alert" >
      VidSigner Counter
  </div>

  <div class="container justify-content-center" >        
        <div class="mb-3">
            <label for="txtFechaDesde" class="form-label">Start Date</label>
            <input type="date" class="form-control" id="txtFechaDesde" aria-describedby="emailHelp">
            <div id="FechaDesHelp" class="form-text">Set Start Date</div>
        </div>
        <div>
            <button type="button" class="btn btn-primary boton-consulta-totales">Consultar</button>
        </div>
        <div>
            <button type="button" class="btn btn-success boton-exporta-totales">Exportar</button>
        </div>        
    </div>

    <table class="table table-stripped table-hover" id="tablaFirmas" >
        <thead>
            <tr>
                <th>Firmas Consumidas</th>
                <th>Flujo</th>
                <th>Contacto</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

The view has a section for js:

@section Scripts {
    <script src="~/js/conteofirmas.js"></script>
}

And this is the section for my js:

fetch(`/Home/ExportExcel?fechaDesde=${modelo.fechaDesde}`) // call the action
  .then(response => {
      return response.ok ? console.log("Ok") : Promise.reject(response)
  }) // on console I have the "Ok"       
}

Button for call the action:

$(document).on("click", ".boton-exporta-totales", function () { 
    ExportarExcel()
})

There is an other js function for call the data on a table, but this works correctly. Any idea about the error? please I hope you can help me. thanks a lot.


Solution

  • you are getting the data in the JavaScript but you don't pass it over to the browser

    you can use the html tag to pass it over on the a click by setting the href value to your controller

    or you can create a Blob in memory and fill it in with the value of your controller response and than create a element and set the value to your Blob and trigger a click on the element

    you can see hare a example How to export JavaScript array info to csv (on client side)?