ASP NET MVC - Download html table

1

I have a view that has a whole table structure, typing the path of the view in the navigation bar I opened the table. I would like to create a button that would drop this table and save it as .xls Can someone help me? I've already looked for it and found it only if I created the table in other ways and not the table already created in html. Appreciate. Abs,

<table>
<tbody><tr height="20" style="height:15.0pt" bgcolor="#F0F8FF	">

        <td bgcolor="#ffffff"> </td>
        <td align="center" class="xl68" style="border-left:none" bgcolor="gray">   <b>Tópico </b>  </td>
        <td align="center" class="xl68" style="border-left:none" bgcolor="#d3d3d3"><b>   Keyword </b>  </td>
        <td align="center" class="xl68" style="border-left:none" bgcolor="#d3d3d3"><b>   Total de Postagens </b>  </td>
        <td align="center" class="xl68" style="border-left:none" bgcolor="#d3d3d3"><b>   Alcance Total</b>   </td>
        <td align="center" class="xl68" style="border-left:none" bgcolor="#9be29b"><b>   Positivas</b>   </td>
        <td align="center" class="xl68" style="border-left:none" bgcolor="#FFFACD"><b>   Neutras  </b> </td>
        <td align="center" class="xl68" style="border-left:none" bgcolor="#ff9999"><b>   Negativas  </b> </td>
        <td align="center" class="xl68" style="border-left:none"> <b>  Twitter   </b>  </td>
        <td align="center" class="xl68" style="border-left:none"> <b>  Facebook  </b>  </td>
        <td align="center" class="xl68" style="border-left:none"> <b>  Instagram </b>  </td>
        <td align="center" class="xl68" style="border-left:none"> <b>  Youtube   </b>  </td>
        <td align="center" class="xl68" style="border-left:none"> <b>  Outras    </b>  </td>
        <td bgcolor="#ffffff"> </td>
    </tr>

<tr height="20" style="height:15.0pt">

            <td></td>
            <td align="center" class="xl68" style="border-left:none">@topico.name</td>
            <td align="center" class="xl68" style="border-left:none">@topico.name</td>
            <td align="center" class="xl68" style="border-left:none">@posts.Count</td>
            <td align="center" class="xl68" style="border-left:none">@reach</td>
            <td align="center" class="xl68" style="border-left:none">@positivo</td>
            <td align="center" class="xl68" style="border-left:none">@neutro</td>
            <td align="center" class="xl68" style="border-left:none">@negativo</td>
            <td align="center" class="xl68" style="border-left:none">@twitterCount</td>
            <td align="center" class="xl68" style="border-left:none">@facebookCount</td>
            <td align="center" class="xl68" style="border-left:none">@instagramCount</td>
            <td align="center" class="xl68" style="border-left:none">@youtubeCount</td>
            <td align="center" class="xl68" style="border-left:none">@outros</td>
            <td> </td>
        </tr>
        </tbody>
</table>
    
asked by anonymous 10.03.2016 / 20:40

2 answers

0

Just create a Action in your controller with the HTTP header you want, in your case for .xls .

In terms of code, it would look something like this:

   public ActionResult ExportarParaExcel()
    {
        var lista = db.ENTIDADE.ToList();//Sua lista que está enviando apra View.

        Response.AddHeader("content-disposition", "attachment; filename=NOMEARQUIVO.xls");
        Response.ContentType = "application/vnd.ms-excel";
        return View(lista);

    }

As above you do not need to make any changes to your view . Just put the two lines in your Action already working and you will see the result.

    
10.03.2016 / 21:35
1

You can do this using jQuery and window.open('data:application/vnd.ms-excel) ...

I did a Fiddle for you to test, but basically you need to export the HTML of your table.

Assuming your html:

<div id="divResultado">
    <table>
        <tr>
            <th>Data</th>
            <th>Hora</th>
            <th>Carro</th>
        </tr>
        <tr>
            <td>@data</td>
            <td>@hora</td>
            <td>@carro</td>
        </tr>
    </table>
</div>

And the button:

<input type="button" id="btnExport" value=" Exportar para excel " />

And since its <table> is within the% div, with JQuery:

$("#btnExport").click(function (e) {
    window.open('data:application/vnd.ms-excel,' + $('#divResultado').html());
    e.preventDefault();
});
    
10.03.2016 / 21:15