Exportando uma grade para o Excel em três etapas simples

Exportando uma grade para o Excel em três etapas simples

Em um projeto de aplicação Web, exportar uma grade para um arquivo do Excel é um dos requisitos mais frequentes. Existem várias maneiras de fazer isso, mas o IgniteUI torna isso super simples. Basta uma linha de código!

7min read

Em um projeto de aplicação Web, exportar uma grade para um arquivo do Excel é um dos requisitos mais frequentes. Existem várias maneiras de fazer isso, mas o IgniteUI simplifica. Basta uma linha de código!

Neste post, aprenderemos a:

  • Create a grid
  • Exportar a grade para um arquivo do Excel
  • Exportar uma grade com recursos como Paginação habilitada para um arquivo do Excel

Let’s get started.

Adicionando referências

Para trabalhar com qualquer controle IgniteUI, primeiro precisamos adicionar as referências JavaScript e CSS necessárias. Então, vamos começar com isso. Temos três opções para adicionar referências:

  1. Baixe o IgniteUI e adicione os arquivos necessários ao projeto.
  2. Use o pacote NuGet no Visual Studio. Clique com o botão direito do mouse no projeto e selecione Gerenciar pacote NuGet. Pesquise o IgniteUI no Gerenciador de Pacotes NuGet e instale uma versão de avaliação do IgniteUI no projeto.
  3. Via CDN: The IgniteUI team provides a public CDN to use.

Nesta demonstração, instalei o IgniteUI usando o pacote NuGet para o projeto. Precisamos adicionar as referências necessárias, conforme mostrado na lista abaixo:

    <link href="Content/Infragistics/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="Content/Infragistics/css/structure/infragistics.css" rel="stylesheet" />


    <script src="scripts/jquery-2.0.3.min.js"></script>
    <script src="scripts/jquery-ui-1.10.3.min.js"></script>

    <script src="scripts/Infragistics/js/infragistics.core.js"></script>
    <script src="scripts/Infragistics/js/infragistics.lob.js"></script>
 
    <script src="scripts/Infragistics/js/modules/infragistics.documents.core.js"></script>
    <script src="scripts/Infragistics/js/modules/infragistics.excel.js"></s cript>
    <script src="scripts/Infragistics/js/modules/infragistics.gridexcelexporter.js"></script>

    <script src="http://www.igniteui.com/js/external/FileSaver.js"></script>
    <script src="http://www.igniteui.com/js/external/Blob.js"></script>
    
    <script src="demo.js"></script>

Essencialmente, estamos adicionando referências de:

  • Bibliotecas CSS IgniteUI
  • Biblioteca jQuery
  • Biblioteca de interface do usuário do jQuery
  • Bibliotecas principais, de desenvolvimento e lob do IgniteUI
  • Bibliotecas IgniteUI para exportação do Excel

Lembre-se de que você precisa seguir a mesma sequência ao adicionar referências, conforme mostrado na lista acima. Você pode notar que também adicionei uma referência ao arquivo demo.js. Como iniciante, demo.js contém uma função, conforme mostrado na lista abaixo. Escreveremos todo o código JavaScript necessário dentro desta função.

$(function () {
    //write ignite code here 
});

Também temos outra opção para escrever o código IgniteUI dentro da função jQuery document ready.

Create HTML  

Em seguida, vamos criar nossa página HTML com dois elementos:

  • Uma tabela HTML que é convertida em igGrid
  • Um botão HTML que, quando clicado, exportará a grade para o Excel

Vamos em frente e criar HTML conforme mostrado na lista abaixo:

<body>
    <table id="grid" ></table>  
    <button id="btnExportToExcel" type="button">Export to Excel</button>
</body>

Creating the igGrid

Você pode criar um igGrid vinculando dados de:

  1. Dados JSON do servidor de back-end
  2. Ponto final do OData
  3. Associação a uma fonte de dados local. O igGrid pode ser vinculado a uma matriz de objetos JSON criada localmente no aplicativo

Criamos uma matriz de objetos JSON productData, conforme mostrado na listagem abaixo:

var productData = [
          { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "SafetyStockLevel": 1000 },
          { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "SafetyStockLevel": 1000 },
          { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "SafetyStockLevel": 800 },
          { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "SafetyStockLevel": 800 },
          { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036", "SafetyStockLevel": 800 },
          { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "SafetyStockLevel": 500 },
          { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "SafetyStockLevel": 500 },
          { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "SafetyStockLevel": 500 },
          { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "SafetyStockLevel": 1000 },
          { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137", "SafetyStockLevel": 1000 }
    ];

Podemos vincular os dados acima e criar uma grade, conforme mostrado na listagem abaixo. Essencialmente, precisamos selecionar uma tabela HTML e convertê-la em igGrid definindo várias propriedades. Lembre-se de que, para criar uma grade mínima, precisamos colocar apenas a propriedade da fonte de dados. No entanto, aqui estamos definindo outras propriedades, como cabeçalho de colunas, chave primária, etc.

Portanto, o igGrid pode ser criado conforme mostrado na listagem abaixo:

$("#grid").igGrid({
        columns: [
          { key: "ProductID", headerText: "Product ID" },
          { key: "Name", headerText: "Name" },
          { key: "ProductNumber", headerText: "Product number" },
          { key: "SafetyStockLevel", headerText: "Safety stock level" }
        ],
        autoGenerateColumns: false,
        primaryKey: "ProductID",
        dataSource: productData,
        width: "1500px"
    });

Você pode querer observar que a propriedade dataSource na listagem acima está definida como a matriz de objetos JSON productData. Lembre-se de que ele pode ser definido como:

  • ODATA EndPoint URL
  • REST service EndPoint returning JSON data
  • Local JOSN data

Independentemente do tipo de origem definido para a propriedade dataSource do igGrid, a exportação para o Excel seria a mesma. Neste ponto, ao executar o aplicativo, você encontrará uma grade e um botão como mostra a imagem abaixo:

Precisamos exportar a grade para o Excel com o clique do botão.

Exportando igGrid para Excel

Exportar uma grade para um arquivo do Excel é muito simples. IgniteUI nos deu um método no objeto ig chamado GridExcelExporter.exportGrid. Precisamos usar esse método para exportar uma grade para o Excel. Ao clicar no botão, a grade acima pode ser exportada para o Excel, conforme mostrado na listagem abaixo.

   $("#btnExportToExcel").click(function () {

        console.log("exporting to Excel");
        $.ig.GridExcelExporter.exportGrid($("#grid"));
    });

Como você deve ter notado, estamos passando a ID da grade dentro do método GridExcelExporter.exportGrid. No momento, o arquivo do Excel será salvo com o nome padrão. Se desejarmos baixar o arquivo Excel com um nome desejado, precisamos definir o valor da propriedade filename conforme mostrado na listagem abaixo.

$("#btnExportToExcel").click(function () {
        console.log("exporting to Excel");

        $.ig.GridExcelExporter.exportGrid($("#grid"), {
            fileName: "yourfilename"
        });
});

Exportando uma grade com recursos habilitados

Até agora, exportamos uma Grid simples, mas podemos ter um cenário em que a grid tenha muitos recursos habilitados, como Paging, Sorting, Filtering, etc.  O GridExcelExporter ignorará os recursos por padrão e exportará toda a grade em um arquivo do Excel.

Digamos que temos recursos habilitados no igGrid, conforme mostrado na lista abaixo:

$("#grid").igGrid({
        columns: [
          { key: "ProductID", headerText: "Product ID" },
          { key: "Name", headerText: "Name" },
          { key: "ProductNumber", headerText: "Product number" },
          { key: "SafetyStockLevel", headerText: "Safety stock level" }
        ],
        autoGenerateColumns: false,
        primaryKey: "ProductID",
        dataSource: productData,
        features: [
                  {
                      name: 'Paging',
                      type: "local",
                      pageSize: 2
                  },
                  {
                      name: "Filtering"
                  },
                  {
                      name: "Sorting"
                  }
        ],
        width: "1500px"
    });

Podemos persistir esses recursos ao exportar para o Excel, conforme mostrado na lista abaixo. Aqui estamos definindo propriedades gridFeatureOptions, como classificação e paginação.

   $("#btnExportToExcel").click(function () {
        console.log("exporting to Excel");
        $.ig.GridExcelExporter.exportGrid($("#grid"), {
            fileName: "yourfilename",
            gridFeatureOptions: { "sorting": "applied","paging": "currentPage", "summaries": "applied" },
        });
    });

Se não definirmos um valor para gridFeatureOptions, por padrão, o arquivo do Excel será exportado ignorando os recursos de grade. Por exemplo, o igGrid terá a paginação habilitada com 2 registros por página e há um total de 5 páginas. Se gridFeatureOptions não estiver definido, o IgniteUI exportará todos os 10 registros no arquivo do Excel.

Conclusão

Este post nos ensinou que exportar um Grid para um arquivo Excel usando o IgniteUI GridExcelExporter é muito fácil.  Para referência, vamos juntar cada pedaço de código.

$(function () {
   
    var productData = [
         { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "SafetyStockLevel": 1000 },
         { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "SafetyStockLevel": 1000 },
         { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "SafetyStockLevel": 800 },
         { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "SafetyStockLevel": 800 },
         { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036", "SafetyStockLevel": 800 },
         { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "SafetyStockLevel": 500 },
         { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "SafetyStockLevel": 500 },
         { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "SafetyStockLevel": 500 },
         { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "SafetyStockLevel": 1000 },
         { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137", "SafetyStockLevel": 1000 }
    ];

// Creating GRID 
    $("#grid").igGrid({
        columns: [
          { key: "ProductID", headerText: "Product ID" },
          { key: "Name", headerText: "Name" },
          { key: "ProductNumber", headerText: "Product number" },
          { key: "SafetyStockLevel", headerText: "Safety stock level" }
        ],
        autoGenerateColumns: false,
        primaryKey: "ProductID",
        dataSource: productData,
        features: [
                  {
                      name: 'Paging',
                      type: "local",
                      pageSize: 2
                  },
                  {
                      name: "Filtering"
                  },
                  {
                      name: "Sorting"
                  }
        ],
        width: "1500px"
    });

    
    // Exporting to Excel 
    $("#btnExportToExcel").click(function () {
        console.log("exporting to Excel");
        $.ig.GridExcelExporter.exportGrid($("#grid"), {
            fileName: "yourfilename",
            gridFeatureOptions: { "sorting": "applied","paging": "currentPage", "summaries": "applied" },
        });
    });

});

Espero que você ache este post útil! Fique de olho nas postagens futuras em que abordaremos outros controles IgniteUI e seus recursos. Obrigado por ler.

Como
Solicite uma demonstração