Export a JQuery bootgrid to Excel

Question

Export a JQuery bootgrid to Excel

Navigation

#1 by (0 votes)

0

I have researched here in the stak and the internet, and I have seen some articles and tips on how to export an HTML table to excel. But in my case, I think it's a bit different because I'm using JQuery Bootgrid and all the materials I read end up not working.

As I have a bootgrid filter and I already have the filtered data on the screen, I need to export this data to Excel. As I've seen, some programmers recommend converting the HTML table to excel.

I've already used Jquery.table2excel, I also tried the tableexport, but none worked. My bootgrid is simple, and even then it can not export excel from it. What I got closer was with the tableexport, but the file is generated empty.

Follow my code, I'm using ASP.NET MVC with 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>
}

jquery mvc asp.net-mvc bootgrid

asked by anonymous 08.08.2018 / 13:36

1 answer

How to use type TBitmap32 (Delphi) in a DLL called in C ++? Error creating a procedure: Cursor declaration after handler declaration

score 0 · Answer 1

The possibility of exporting is not in the jquery-bootgrid documentation, but you can use Tableexport.js . You said in the question that you could not use it. Here's a note from documentation .

To use this plug-in, include the jQuery library, the FileSaver.js and the TableExport.js plug-in before the tag <body> of closing the HTML document.

$("#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><scriptsrc="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><scriptsrc="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><tableid="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>

As you are using ASP.NET MVC , a second alternative to generating Excel is to use EPPlus . Just install it via NuGet. link

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");
}