Web Components Exportación de cuadrícula jerárquica al servicio de Excel
El servicio Ignite UI for Web Components Exportar a Excel en Web Components cuadrícula jerárquica puede exportar datos a Excel. La funcionalidad de exportación de datos se encapsula en la ExcelExporterService
clase y los datos se exportan en formato de tabla de MS Excel. Este formato permite funciones como filtrado, clasificación, etc. Para hacer esto, debe invocar el Export
método de ExcelExporterService
y pasar el componente como primer argumento para exportar la IgcHierarchicalGridComponent
cuadrícula fácilmente.
Ejemplo de exportador de Excel Web Components
import 'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent } from 'igniteui-webcomponents-grids/grids';
import SingersExportData from './SingersExportData.json';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private hierarchicalGrid1: IgcHierarchicalGridComponent
private _bind: () => void;
constructor() {
var hierarchicalGrid1 = this.hierarchicalGrid1 = document.getElementById('hierarchicalGrid1') as IgcHierarchicalGridComponent;
this._bind = () => {
hierarchicalGrid1.data = this.singersExportData;
}
this._bind();
}
private _singersExportData: any[] = SingersExportData;
public get singersExportData(): any[] {
return this._singersExportData;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="container fill">
<igc-hierarchical-grid
auto-generate="false"
primary-key="ID"
allow-filtering="true"
filter-mode="excelStyleFilter"
name="hierarchicalGrid1"
id="hierarchicalGrid1">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-exporter
export-csv="false"
export-excel="true">
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="Artist"
header="Artist"
data-type="string"
sortable="true">
</igc-column>
<igc-column
field="Debut"
header="Debut"
data-type="number">
</igc-column>
<igc-column
field="GrammyNominations"
header="Grammy Nominations"
data-type="number"
sortable="true">
</igc-column>
<igc-column
field="GrammyAwards"
header="Grammy Awards"
data-type="number"
sortable="true">
</igc-column>
<igc-row-island
child-data-key="Albums"
auto-generate="false">
<igc-column
field="Album"
header="Album"
data-type="string">
</igc-column>
<igc-column
field="LaunchDate"
header="Launch Date"
data-type="date">
</igc-column>
<igc-column
field="BillboardReview"
header="Billboard Review"
data-type="string">
</igc-column>
<igc-column
field="USBillboard200"
header="US Billboard 200"
data-type="string">
</igc-column>
<igc-row-island
child-data-key="Songs"
auto-generate="false">
<igc-column
field="Number"
header="No."
data-type="string">
</igc-column>
<igc-column
field="Title"
header="Title"
data-type="string">
</igc-column>
<igc-column
field="Released"
header="Released"
data-type="date">
</igc-column>
<igc-column
field="Genre"
header="Genre"
data-type="string">
</igc-column>
</igc-row-island>
</igc-row-island>
<igc-row-island
child-data-key="Tours"
auto-generate="false">
<igc-column
field="Tour"
header="Tour"
data-type="string">
</igc-column>
<igc-column
field="StartedOn"
header="Started on"
data-type="string">
</igc-column>
<igc-column
field="Location"
header="Location"
data-type="string">
</igc-column>
<igc-column
field="Headliner"
header="Headliner"
data-type="string">
</igc-column>
<igc-row-island
child-data-key="TourData"
auto-generate="false">
<igc-column
field="Country"
header="Country"
data-type="string">
</igc-column>
<igc-column
field="TicketsSold"
header="Tickets Sold"
data-type="number">
</igc-column>
<igc-column
field="Attendants"
header="Attendants"
data-type="number">
</igc-column>
</igc-row-island>
</igc-row-island>
</igc-hierarchical-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Exportar cuadrícula de encabezados de varias columnas
Ahora es posible exportar IgcHierarchicalGridComponent
con encabezados de varias columnas definidos. Todos los encabezados se reflejarán en el archivo de Excel exportado a medida que se muestran en el IgcHierarchicalGridComponent
. Si desea excluir los encabezados de varias columnas definidos de los datos exportados, puede establecer el ExporterOption
IgnoreMultiColumnHeaders
parámetro a true
.
El IgcHierarchicalGridComponent exportado no tendrá formato de tabla, ya que las tablas de Excel no admiten varios encabezados de columna.
import 'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcGridToolbarExporterComponent } from 'igniteui-webcomponents-grids/grids';
import MultiColumnsExportData from './MultiColumnsExportData.json';
import { IgcExporterEventArgs } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private hierarchicalGrid1: IgcHierarchicalGridComponent
private hGridToolbarExporter: IgcGridToolbarExporterComponent
private _bind: () => void;
constructor() {
var hierarchicalGrid1 = this.hierarchicalGrid1 = document.getElementById('hierarchicalGrid1') as IgcHierarchicalGridComponent;
var hGridToolbarExporter = this.hGridToolbarExporter = document.getElementById('hGridToolbarExporter') as IgcGridToolbarExporterComponent;
this.webHierarchicalGridExportMultiColumnHeaders = this.webHierarchicalGridExportMultiColumnHeaders.bind(this);
this._bind = () => {
hierarchicalGrid1.data = this.multiColumnsExportData;
hGridToolbarExporter.addEventListener("exportStarted", this.webHierarchicalGridExportMultiColumnHeaders);
}
this._bind();
}
private _multiColumnsExportData: any[] = MultiColumnsExportData;
public get multiColumnsExportData(): any[] {
return this._multiColumnsExportData;
}
public webHierarchicalGridExportMultiColumnHeaders(args: CustomEvent<IgcExporterEventArgs>): void {
if (args.detail.options) {
args.detail.options.ignoreMultiColumnHeaders = false;
}
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="container fill">
<igc-hierarchical-grid
auto-generate="false"
primary-key="ID"
moving="true"
allow-filtering="true"
name="hierarchicalGrid1"
id="hierarchicalGrid1">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-exporter
export-csv="false"
export-excel="true"
name="hGridToolbarExporter"
id="hGridToolbarExporter">
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column-group
header="General Information">
<igc-column
field="Company"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column-group
header="Personal Details">
<igc-column
field="ContactName"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ContactTitle"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-column-group
header="Address Information">
<igc-column-group
header="Location">
<igc-column
field="Address"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="City"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="PostalCode"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Country"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="Contact Information">
<igc-column
field="Phone"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Fax"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-row-island
child-data-key="ChildCompanies"
auto-generate="false"
moving="true">
<igc-column-group
header="General Information">
<igc-column
field="Company"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column-group
header="Personal Details">
<igc-column
field="ContactName"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ContactTitle"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-column-group
header="Address Information">
<igc-column-group
header="Location">
<igc-column
field="Address"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="City"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="PostalCode"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Country"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="Contact Information">
<igc-column
field="Phone"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Fax"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-row-island
child-data-key="ChildCompanies"
auto-generate="false"
moving="true">
<igc-column-group
header="General Information">
<igc-column
field="Company"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column-group
header="Personal Details">
<igc-column
field="ContactName"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="ContactTitle"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-column-group
header="Address Information">
<igc-column-group
header="Location">
<igc-column
field="Address"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="City"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="PostalCode"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Country"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="Contact Information">
<igc-column
field="Phone"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
<igc-column
field="Fax"
data-type="string"
sortable="true"
resizable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
</igc-row-island>
</igc-row-island>
</igc-hierarchical-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Exportar cuadrícula con encabezados de columna congelados
De forma predeterminada, el servicio Excel Exporter exporta la cuadrícula con encabezados de columna desplazables (descongelados). Hay escenarios en los que es posible que desee congelar todos los encabezados encima del archivo de Excel exportado para que siempre permanezcan a la vista mientras el usuario se desplaza por los registros. Para lograr esto, puede configurar ExporterOption
FreezeHeaders
en true
.
constructor() {
var hGridToolbarExporter = document.getElementById('hGridToolbarExporter') as IgcGridToolbarExporterComponent;
hGridToolbarExporter.addEventListener("exportStarted", this.webGridExportEventFreezeHeaders);
}
public webGridExportEventFreezeHeaders(args: CustomEvent<IgcExporterEvent>): void {
args.detail.options.freezeHeaders = true;
}
ts
Limitaciones conocidas
Limitación | Descripción |
---|---|
Niveles de jerarquía | El servicio exportador de Excel puede crear hasta 8 niveles de jerarquía. |
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. |
Exportar columnas fijadas | En el archivo de Excel exportado, las columnas fijadas no se congelarán, sino que se mostrarán en el mismo orden en que aparecen en la cuadrícula. |
Referencias de API
ExcelExporterService
ExcelExporterOptions
IgcHierarchicalGridComponent
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.