Lista de componentes

Servicio de exportación de cuadrícula Angular Pivot a Excel

El servicio Excel Exporter puede exportar datos a Excel desde IgxPivotGrid. La funcionalidad de exportación de datos está encapsulada en la clase IgxExcelExporterService. Para desencadenar el proceso, debe invocar el método export de IgxExcelExporterService y pasar el componente IgxPivotGrid como primer argumento.

Ejemplo de exportador de Excel Angular

import { Component, ViewChild } from "@angular/core";

import { IPivotConfiguration, PivotAggregation, IgxPivotNumericAggregate, IgxPivotDateDimension, IgxExcelExporterService, IgxExcelExporterOptions, IgxPivotGridComponent, IgxButtonDirective } from "igniteui-angular"
import { SALES_DATA } from "../../data/dataToAnalyze";

export class IgxTotalSaleAggregate {
    public static totalSale: PivotAggregation = (members, data: any) =>
        data.reduce((accumulator, value) => accumulator + value.Product.UnitPrice * value.NumberOfUnits, 0);

    public static totalMin: PivotAggregation = (members, data: any) => {
        let min = 0;
        if (data.length === 1) {
            min = data[0].Product.UnitPrice * data[0].NumberOfUnits;
        } else if (data.length > 1) {
            const mappedData = data.map(x => x.Product.UnitPrice * x.NumberOfUnits);
            min = mappedData.reduce((a, b) => Math.min(a, b));
        }
        return min;
    };

    public static totalMax: PivotAggregation = (members, data: any) => {
        let max = 0;
        if (data.length === 1) {
            max = data[0].Product.UnitPrice * data[0].NumberOfUnits;
        } else if (data.length > 1) {
            const mappedData = data.map(x => x.Product.UnitPrice * x.NumberOfUnits);
            max = mappedData.reduce((a, b) => Math.max(a, b));
        }
        return max;
    };
}

@Component({
    selector: 'app-pivot-export-sample',
    styleUrls: ['./pivot-export.component.scss'],
    templateUrl: './pivot-export.component.html',
    imports: [IgxButtonDirective, IgxPivotGridComponent]
})
export class PivotExportComponent {
    @ViewChild(IgxPivotGridComponent, { static: true }) public grid: IgxPivotGridComponent;
    
    public data = SALES_DATA;

    public pivotConfig: IPivotConfiguration = {
        columns: [
            new IgxPivotDateDimension(
                {
                    memberName: 'Date',
                    enabled: true
                },
                {
                    months: false,
                    quarters: true,
                    fullDate: false
                }
            )
        ],
        rows: [
            {
                memberName: 'City',
                width: "150px",
                memberFunction: (data) => data.Seller.City,
                enabled: true
            },
            {
                memberFunction: () => 'All Products',
                memberName: 'AllProducts',
                enabled: true,
                width: "150px",
                childLevel: {
                    memberFunction: (data) => data.Product.Name,
                    memberName: 'ProductCategory',
                    enabled: true
                }
            }
        ],
        values: [
            {
                member: 'Value',
                aggregate: {
                    key: 'SUM',
                    aggregator: IgxPivotNumericAggregate.sum,
                    label: 'Sum'
                },
                aggregateList: [{
                    key: 'SUM',
                    aggregator: IgxPivotNumericAggregate.sum,
                    label: 'Sum'
                }],
                enabled: true,
                formatter: (value) => value ? '$' + parseFloat(value).toFixed(3) : undefined
            },
            {
                member: 'AmountofSale',
                displayName: 'Amount of Sale',
                aggregate: {
                    key: 'SUM',
                    aggregator: IgxTotalSaleAggregate.totalSale,
                    label: 'Sum of Sale'
                },
                aggregateList: [{
                    key: 'SUM',
                    aggregator: IgxTotalSaleAggregate.totalSale,
                    label: 'Sum of Sale'
                }, {
                    key: 'MIN',
                    aggregator: IgxTotalSaleAggregate.totalMin,
                    label: 'Minimum of Sale'
                }, {
                    key: 'MAX',
                    aggregator: IgxTotalSaleAggregate.totalMax,
                    label: 'Maximum of Sale'
                }],
                enabled: true,
                dataType: 'currency'
            }
        ]
    };

    constructor(private excelExportService: IgxExcelExporterService) {
    }

    public exportButtonHandler() {
        this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));
    }
}
ts

<div class="pivotgrid-sample">
    <div class="button-container">
        <button igxButton="contained" (click)="exportButtonHandler()">Export To Excel</button>
        Press the button to export the Pivot Grid as .xlsx file.
    </div>

    <igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfig" [rowSelection]="'single'"
        [superCompactMode]="true" [defaultExpandState]='true' [pivotUI]="{ showRowHeaders: true }">
    </igx-pivot-grid>
</div>
html

.pivotgrid-sample {
    justify-content: center;
    margin: 0 auto;
    width: 90%;
    height: 80%;

    .button-container {
        align-items: flex-start;
        margin: 25px auto;
    }

    igx-pivot-grid {
        align-items: center;
    }
}
scss

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Exportación de datos de Pivot Grid

Para comenzar a usar IgniteUI Excel Exporter, primero importe IgxExcelExporterService en el archivo app.module.ts y agregue el servicio a la matriz providers:

// app.module.ts
import { IgxExcelExporterService } from 'igniteui-angular';
// import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  providers: [ IgxExcelExporterService ]
})

export class AppModule {}
typescript

En v12.2.1 y posteriores, los servicios de exportación se brindan en la raíz, lo que significa que ya no es necesario declararlos en los proveedores de AppModule.

Para iniciar un proceso de exportación, puede utilizar el controlador de un botón en la plantilla de su componente.

<igx-pivot-grid #pivotGrid [data]="localData" [pivotConfiguration]="pivotConfig"></igx-pivot-grid>
<button (click)="exportButtonHandler()">Export IgxPivotGrid to Excel</button>
html

Puede acceder al servicio de exportación definiendo un argumento de tipo IgxExcelExporterService en el constructor del componente y el marco Angular proporcionará una instancia del servicio. Para exportar algunos datos en formato MS Excel, debe invocar el método export del servicio de exportación y pasar el componente IgxPivotGrid como primer argumento.

Aquí está el código que ejecutará el proceso de exportación en el archivo mecanografiado del componente:

// component.ts
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
import { IgxPivotGridComponent } from 'igniteui-angular';

@ViewChild('pivotGrid') public pivotGrid: IgxPivotGridComponent;

constructor(private excelExportService: IgxExcelExporterService) {
}

public exportButtonHandler() {
  this.excelExportService.export(this.pivotGrid, new IgxExcelExporterOptions('ExportedDataFile'));
}
typescript

Si todo salió bien, debería ver el componente IgxPivotGrid y un botón debajo de él. Al presionar el botón, se activará el proceso de exportación y el navegador descargará un archivo llamado "ExportedDataFile.xlsx" que contiene los datos del componente Pivot Grid en formato MS Excel.

Los indicadores de expandir/contraer en Excel se muestran según la jerarquía de la última dimensión de la cuadrícula dinámica.

La cuadrícula dinámica exportada no tendrá formato de tabla, ya que las tablas de Excel no admiten encabezados de filas múltiples.

Personalización del contenido exportado

En los ejemplos anteriores, el servicio Exportador de Excel exportaba todos los datos disponibles. Hay situaciones en las que es posible que desee omitir la exportación de una fila o incluso de una columna completa. Para lograr esto, puede conectarse a los eventos columnExporting y/o rowExporting que se activan respectivamente para cada columna y/o cada fila y cancelar el evento respectivo estableciendo la propiedad cancel del objeto de argumento de evento en true.

El siguiente ejemplo excluirá todas las columnas de la exportación si su encabezado es "Cantidad de venta":

// component.ts

this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
    if (args.header == 'Amount of Sale') {
        args.cancel = true;
    }
});
this.excelExportService.export(this.pivotGrid, new IgxExcelExporterOptions('ExportedDataFile'));
typescript

Cuando exporta datos desde el componente Pivot Grid, el proceso de exportación tiene en cuenta características como el filtrado de filas y la ocultación de columnas y exporta solo los datos visibles en Pivot Grid. Puede configurar el servicio exportador para incluir filas filtradas o columnas ocultas configurando propiedades en el objeto IgxExcelExporterOptions.

Limitaciones conocidas

Limitación	Descripción
Tamaño máximo de hoja de trabajo	El tamaño máximo de hoja de cálculo admitido por Excel es 1.048.576 filas por 16.384 columnas.
Estilo celular	El servicio de exportación de Excel no admite la exportación de un estilo personalizado aplicado a un componente de celda. En tales escenarios, recomendamos utilizar la Biblioteca de Excel.

Referencias de API

El servicio Excel Exporter tiene algunas API más para explorar, que se enumeran a continuación.

Componentes adicionales que se utilizaron:

Recursos adicionales

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.