Exportar una cuadrícula a Excel en tres sencillos pasos

Exportar una cuadrícula a Excel en tres sencillos pasos

En un proyecto de aplicación web, exportar una cuadrícula a un archivo de Excel es uno de los requisitos más frecuentes. Hay varias formas de hacer esto, pero IgniteUI lo hace súper simple. ¡Todo lo que se necesita es una línea de código!

7min read

En un proyecto de aplicación web, exportar una cuadrícula a un archivo de Excel es uno de los requisitos más frecuentes. Hay varias formas de hacer esto, pero IgniteUI lo simplifica. ¡Todo lo que se necesita es una línea de código!

En este post, aprenderemos a:

  • Create a grid
  • Exportar la cuadrícula a un archivo de Excel
  • Exportar una cuadrícula con funciones como la paginación habilitada a un archivo de Excel

Let’s get started.

Adición de referencias

Para trabajar con cualquier control IgniteUI, primero debemos agregar las referencias de JavaScript y CSS necesarias. Entonces, comencemos con eso. Tenemos tres opciones para añadir referencias:

  1. Descargue IgniteUI y agregue los archivos necesarios al proyecto.
  2. Use el paquete NuGet en Visual Studio. Haga clic con el botón derecho en el proyecto y seleccione Administrar paquete NuGet. Busque IgniteUI en el Administrador de paquetes de NuGet e instale una versión de prueba de IgniteUI en el proyecto.
  3. Via CDN: The IgniteUI team provides a public CDN to use.

En esta demostración, instalé IgniteUI mediante el paquete NuGet para el proyecto. Necesitamos agregar las referencias requeridas como se muestra en el listado a continuación:

    <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>

Esencialmente, estamos agregando referencias de:

  • Bibliotecas CSS de IgniteUI
  • Biblioteca jQuery
  • Biblioteca de interfaz de usuario jQuery
  • Bibliotecas principales, de desarrollo y de lobulación de IgniteUI
  • Bibliotecas de IgniteUI para la exportación de Excel

Tenga en cuenta que debe seguir la misma secuencia al agregar referencias, como se muestra en la lista anterior. Puede notar que también he agregado una referencia al archivo demo.js. Para empezar, demo.js contiene una función, como se muestra en el siguiente listado. Escribiremos todo el código JavaScript requerido dentro de esta función.

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

También tenemos otra opción para escribir el código de IgniteUI dentro de la función jQuery document ready.

Create HTML  

A continuación, vamos a crear nuestra página HTML con dos elementos:

  • Una tabla HTML que se convierte en igGrid
  • Un botón HTML que, al hacer clic, exportará la cuadrícula a Excel

Sigamos adelante y creemos HTML como se muestra en la lista a continuación:

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

Creating the igGrid

Puede crear un igGrid enlazando datos de:

  1. Datos JSON del servidor backend
  2. Punto de conexión de OData
  3. Enlace a un origen de datos local. igGrid podría enlazarse a una matriz de objetos JSON creada localmente en la aplicación

Hemos creado una matriz de objetos JSON productData como se muestra en el siguiente listado:

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 los datos anteriores y crear una cuadrícula, como se muestra en el listado a continuación. Esencialmente, necesitamos seleccionar una tabla HTML y convertirla en igGrid configurando varias propiedades. Tenga en cuenta que para crear una cuadrícula mínima, necesitamos poner solo la propiedad de la fuente de datos. Sin embargo, aquí estamos configurando otras propiedades como el encabezado de las columnas, la clave principal, etc.

Por lo tanto, igGrid se puede crear como se muestra en la lista a continuación:

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

Es posible que desee observar que la propiedad dataSource de la lista anterior está establecida en la matriz de objetos JSON productData. Tenga en cuenta que se puede configurar para:

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

Independientemente del tipo de origen que se establezca en la propiedad dataSource de igGrid, la exportación a Excel sería la misma. En este punto, al ejecutar la aplicación, encontrará una cuadrícula y un botón como se muestra en la imagen a continuación:

Necesitamos exportar la cuadrícula a Excel con solo hacer clic en el botón.

Exportación de igGrid a Excel

Exportar una cuadrícula a un archivo de Excel es muy sencillo. IgniteUI nos ha dado un método en el objeto ig llamado GridExcelExporter.exportGrid. Necesitamos usar este método para exportar una cuadrícula a Excel. Al hacer clic en el botón, la cuadrícula anterior se puede exportar a Excel, como se muestra en la lista a continuación.

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

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

Como habrás notado, estamos pasando el ID de la cuadrícula dentro del método GridExcelExporter.exportGrid. En este momento, el archivo de Excel se guardará con el nombre predeterminado. Si deseamos descargar el archivo de Excel con el nombre deseado, debemos establecer el valor de la propiedad filename como se muestra en la lista a continuación.

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

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

Exportación de una cuadrícula con entidades habilitadas

Hasta ahora, hemos exportado una cuadrícula simple, pero es posible que tengamos un escenario en el que la cuadrícula tenga muchas funciones habilitadas, como paginación, ordenación, filtrado, etc.  GridExcelExporter ignorará de forma predeterminada las características y exportará toda la cuadrícula en un archivo de Excel.

Digamos que tenemos funciones habilitadas en igGrid como se muestra en la lista a continuación:

$("#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 conservar estas características mientras exportamos a Excel, como se muestra en la lista a continuación. Aquí estamos configurando las propiedades de gridFeatureOptions, como la ordenación y la paginación.

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

Si no establecemos un valor para gridFeatureOptions, de forma predeterminada, el archivo de Excel se exportará ignorando las características de la cuadrícula. Por ejemplo, igGrid tendrá habilitada la paginación con 2 registros por página y hay un total de 5 páginas. Si gridFeatureOptions no está establecido, IgniteUI exportará los 10 registros en el archivo de Excel.

Conclusión

Esta publicación nos enseñó que exportar una cuadrícula a un archivo de Excel usando IgniteUI GridExcelExporter es muy fácil.  Como referencia, vamos a juntar cada pieza 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 este post te sea útil! Esté atento a futuras publicaciones donde cubriremos otros controles de IgniteUI y sus características. Gracias por leer.

Cómo
Solicitar una demostración