1

Pesquisei aqui no stak e pela internet, e tenho visto alguns artigos e dicas de como exportar uma tabela HTML para excel. Mas no meu caso, penso que seja um pouco diferente porque estou usando o JQuery Bootgrid e todos os materiais que leio acaba não dando certo.

Como eu tenho um filtro no bootgrid e já tenho os dados filtrados na tela, preciso exportar esses dados para o Excel. Como tenho visto, alguns programadores recomendam transformar o table HTML para excel.

Já usei o Jquery.table2excel, também tentei o tableexport, mas nenhum funcionou. Minha bootgrid é simples, e mesmo assim não consegue exportar excel dela. O que cheguei mais próximo foi com o tableexport, mas o arquivo é gerado vazio.

Segue meu código, estou usando ASP.NET MVC com bootgrid.

@{
    ViewBag.Title = "Lista - Certificados Digitais";

}

<body>

    <p>
        <a href="#" class="btn btn-success" data-action="Create">
            <span class="glyphicon glyphicon-plus"></span>
            Cadastrar
        </a>

    </p>


    <table id="gridCertificados">
        <thead>
            <tr>
                <th data-column-id="CertificadoChave">Chave</th>
                <th data-column-id="CertificadoDescricao">Descrição</th>
                <th data-column-id="TipoCertificadoNome">Tipo</th>
                <th data-column-id="ModeloCertificadoNome">Modelo</th>
                <th data-column-id="FornecedorNome">Fornecedor</th>
                <th data-column-id="CertificadoPreco">Preço</th>
                <th data-column-id="CertificadoDtVencimento" data-order="asc">Vencto.</th>
                <th data-formatter="acoes" data-sortable="false">Ações</th>
            </tr>
        </thead>
    </table>

    <button id="btn" class="btn btn-success">Exportar Excel</button>

    <div class="modal fade" id="minhaModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg role=" document"">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="conteudoModal"></div>
                </div>
            </div>
        </div>
    </div>


</body>

@section scripts
    {
    @Scripts.Render("~/bundles/jqueryval")

    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.table2excel.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery.bootgrid.js"></script>
    <script src="~/Scripts/Projeto/ControlarGrid.js"></script>

    <script type="text/javascript">


            var controller = "Certificados";

        var urlListar = "@Url.Action("Listar")"

        $(document).ready(configurarControles);

        $("#btn").click(function () {
            $("#gridCertificados").table2excel({
                name: "Certificados",
                filename: "certif"
            });
        });

    </script>
}
2
  • Acredito que o bootgrid não tem essa transformação pra excel de forma nativa. Pelo menos até onde eu vi na documentação dele não vi nada sobre isso, um que eu sei que tem esse de forma nativa é o datagrid Commented 8/08/2018 às 11:40
  • você poderia disponibilizar a forma como implementou o filtro?
    – Leila
    Commented 15/01/2019 às 17:53

1 Resposta 1

1

Não consta na documentação do jquery-bootgrid a possibilidade de exportar, porém você pode usar o Tableexport.js. Você disse na pergunta que não conseguiu usá-lo. Segue uma nota da documentação.

Para usar este plug-in, inclua a biblioteca jQuery, o script FileSaver.js e o plug-in TableExport.js antes da tag <body> de fechamento do documento HTML.

$("#gridCertificados").bootgrid();
$("#gridCertificados").tableExport();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.2.13/css/tableexport.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.2.13/css/tableexport.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.2.13/js/tableexport.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js"></script>






<table id="gridCertificados" class="table table-condensed table-hover table-striped">
  <thead>
    <tr>
      <th data-column-id="id" data-type="numeric">Codigo</th>
      <th data-column-id="sender">Email</th>
      <th data-column-id="received" data-order="desc">Data cadastro</th>
      <th data-column-id="link" data-formatter="link">Link</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10238</td>
      <td>[email protected]</td>
      <td>14.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10243</td>
      <td>[email protected]</td>
      <td>19.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10248</td>
      <td>[email protected]</td>
      <td>24.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10253</td>
      <td>[email protected]</td>
      <td>29.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10234</td>
      <td>[email protected]</td>
      <td>10.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10239</td>
      <td>[email protected]</td>
      <td>15.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10244</td>
      <td>[email protected]</td>
      <td>20.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10249</td>
      <td>[email protected]</td>
      <td>25.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10237</td>
      <td>[email protected]</td>
      <td>13.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10242</td>
      <td>[email protected]</td>
      <td>18.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10247</td>
      <td>[email protected]</td>
      <td>23.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10252</td>
      <td>[email protected]</td>
      <td>28.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10236</td>
      <td>[email protected]</td>
      <td>12.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10241</td>
      <td>[email protected]</td>
      <td>17.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10246</td>
      <td>[email protected]</td>
      <td>22.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10251</td>
      <td>[email protected]</td>
      <td>27.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10235</td>
      <td>[email protected]</td>
      <td>11.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10240</td>
      <td>[email protected]</td>
      <td>16.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10245</td>
      <td>[email protected]</td>
      <td>21.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
    <tr>
      <td>10250</td>
      <td>[email protected]</td>
      <td>26.10.2013</td>
      <td>pt.stackoverflow</td>
    </tr>
  </tbody>
</table>

Como você está usando ASP .NET MVC, uma segunda alternativa de gerar Excel é usar o EPPlus. Basta instalá-lo via NuGet. https://www.nuget.org/packages/EPPlus/

public ActionResult Exportar()
{

    var excel = new ExcelPackage();
    var data = _repository.ObterDados().ToList();

    var workSheetDetalhes = excel.Workbook.Worksheets.Add("Detalhes");

    workSheetDetalhes.Cells[1, 1].LoadFromCollection(data, true);

    workSheetDetalhes.Cells["A1:L1"].Style.Font.Bold = true;

    workSheetDetalhes.Cells.AutoFitColumns();


    using (var memoryStream = new MemoryStream())
    {
        Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        Response.AddHeader("content-disposition", $"attachment;  filename=Relatorio_{DateTime.Now.Year}_{DateTime.Now.Month}_{DateTime.Now.Day}_Detalhe.xlsx");
        excel.SaveAs(memoryStream);
        memoryStream.WriteTo(Response.OutputStream);
        Response.Flush();
        Response.End();
    }
    return RedirectToAction("Index");
}
1
  • Minha table, pelo que entendi é montada dinamicamente pelo bootgrid, penso que esse pode ser o problema. Tentei novamente usasr o Tableexport, e mesmo assim os arquivos estão sendo gerados em branco.Não consigo usar o $("#gridCertificados").bootgrid(); faço paginação no bootgrid e ao declarar esse trecho na minha view o bootgrdid fica em branco. Vou mexer aqui no EPPlus pra ver se consigo exportar.. Commented 9/08/2018 às 16:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .