Web Components 트리 그리드를 Excel 서비스로 내보내기
Web Components Tree Grid의 Ignite UI for Web Components Export to Excel 서비스는 데이터를 Excel로 내보낼 수 있습니다. 데이터 내보내기 기능은 ExcelExporterService 클래스에 캡슐화되어 있으며 데이터는 MS Excel 테이블 형식으로 내보내집니다. 이 형식은 필터링, 정렬 등의 기능을 허용합니다. 이를 위해 ExcelExporterService의 Export 메서드를 호출하고 IgcTreeGridComponent 구성 요소를 첫 번째 인수로 전달하여 그리드를 쉽게 내보내야 합니다.
Web Components Excel 내보내기 예제
export class EmployeesNestedDataItem {
public constructor(init: Partial<EmployeesNestedDataItem>) {
Object.assign(this, init);
}
public ID: number;
public Age: number;
public Salary: number;
public Productivity: number;
public City: string;
public Country: string;
public Phone: string;
public HireDate: string;
public Name: string;
public Title: string;
public Employees: EmployeesNestedDataItem_EmployeesItem[];
}
export class EmployeesNestedDataItem_EmployeesItem {
public constructor(init: Partial<EmployeesNestedDataItem_EmployeesItem>) {
Object.assign(this, init);
}
public Age: number;
public Salary: number;
public Productivity: number;
public City: string;
public Country: string;
public Phone: string;
public HireDate: string;
public ID: number;
public Name: string;
public Title: string;
}
export class EmployeesNestedData extends Array<EmployeesNestedDataItem> {
public constructor(items: Array<EmployeesNestedDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesNestedDataItem(
{
ID: 1,
Age: 55,
Salary: 80000,
Productivity: 90,
City: `Berlin`,
Country: `Germany`,
Phone: `609-202-505`,
HireDate: `2008-03-20`,
Name: `John Winchester`,
Title: `Development Manager`,
Employees: [
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 43,
Salary: 70000,
Productivity: 80,
City: `Hamburg`,
Country: `Germany`,
Phone: `609-444-555`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
Title: `Senior Software Developer`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 29,
Salary: 60000,
Productivity: 80,
City: `Munich`,
Country: `Germany`,
Phone: `609-333-444`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
Title: `Senior Software Developer`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 31,
Salary: 90000,
Productivity: 80,
City: `Warasw`,
Country: `Poland`,
Phone: `609-222-205`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
Title: `Software Development Team Lead`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 35,
Salary: 70000,
Productivity: 70,
City: `Koln`,
Country: `Germany`,
Phone: `609-502-525`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
Title: `Senior Software Developer`
})]
}),
new EmployeesNestedDataItem(
{
ID: 4,
Age: 42,
Salary: 90000,
Productivity: 80,
City: `Kielce`,
Country: `Poland`,
Phone: `609-202-505`,
HireDate: `2014-01-22`,
Name: `Ana Sanders`,
Title: `CEO`,
Employees: [
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 44,
Salary: 80000,
Productivity: 80,
City: `Warasw`,
Country: `Poland`,
Phone: `609-202-505`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
Title: `Director`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 25,
Salary: 85000,
Productivity: 55,
City: `Paris`,
Country: `France`,
Phone: `609-202-505`,
HireDate: `2017-11-09`,
ID: 5,
Name: `Elizabeth Richards`,
Title: `Vice President`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 39,
Salary: 88000,
Productivity: 88,
City: `London`,
Country: `UK`,
Phone: `609-202-505`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
Title: `Director`
})]
}),
new EmployeesNestedDataItem(
{
ID: 18,
Age: 49,
Salary: 77000,
Productivity: 70,
City: `Manchester`,
Country: `UK`,
Phone: `222-555-577`,
HireDate: `2014-01-22`,
Name: `Victoria Lincoln`,
Title: `Senior Accountant`,
Employees: [
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 43,
Salary: 70000,
Productivity: 80,
City: `Hamburg`,
Country: `Germany`,
Phone: `609-444-555`,
HireDate: `2011-06-03`,
ID: 23,
Name: `Thomas Burke`,
Title: `Senior Accountant`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 29,
Salary: 60000,
Productivity: 80,
City: `Munich`,
Country: `Germany`,
Phone: `609-333-444`,
HireDate: `2009-06-19`,
ID: 22,
Name: `Michael Anderson`,
Title: `Junior Accountant`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 31,
Salary: 90000,
Productivity: 80,
City: `Warasw`,
Country: `Poland`,
Phone: `609-222-205`,
HireDate: `2014-08-18`,
ID: 21,
Name: `Roland Reyes`,
Title: `Accountant Team Lead`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 35,
Salary: 70000,
Productivity: 70,
City: `Koln`,
Country: `Germany`,
Phone: `609-502-525`,
HireDate: `2015-09-17`,
ID: 24,
Name: `Monica Mendel`,
Title: `Senior Software Developer`
})]
}),
new EmployeesNestedDataItem(
{
ID: 10,
Age: 61,
Salary: 85000,
Productivity: 890,
City: `Lyon`,
Country: `France`,
Phone: `259-266-887`,
HireDate: `2010-01-01`,
Name: `Yang Wang`,
Title: `Localization Developer`,
Employees: [
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 31,
Salary: 90000,
Productivity: 80,
City: `Warasw`,
Country: `Poland`,
Phone: `609-222-205`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
Title: `Software Development Team Lead`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 35,
Salary: 70000,
Productivity: 70,
City: `Koln`,
Country: `Germany`,
Phone: `609-502-525`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
Title: `Senior Software Developer`
})]
}),
new EmployeesNestedDataItem(
{
ID: 35,
Age: 35,
Salary: 75000,
Productivity: 75,
City: `Warasw`,
Country: `Poland`,
Phone: `688-244-844`,
HireDate: `2014-01-22`,
Name: `Janine Munoz`,
Title: `HR`,
Employees: [
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 43,
Salary: 70000,
Productivity: 80,
City: `Hamburg`,
Country: `Germany`,
Phone: `609-444-555`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
Title: `Senior Software Developer`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 31,
Salary: 90000,
Productivity: 80,
City: `Warasw`,
Country: `Poland`,
Phone: `609-222-205`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
Title: `Software Development Team Lead`
})]
}),
new EmployeesNestedDataItem(
{
ID: 10,
Age: 49,
Salary: 95000,
Productivity: 80,
City: `Krakow`,
Country: `Poland`,
Phone: `677-266-555`,
HireDate: `2010-01-01`,
Name: `Yang Wang`,
Title: `Sales Manager`,
Employees: [
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 29,
Salary: 60000,
Productivity: 80,
City: `Munich`,
Country: `Germany`,
Phone: `609-333-444`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
Title: `Senior Software Developer`
}),
new EmployeesNestedDataItem_EmployeesItem(
{
Age: 35,
Salary: 70000,
Productivity: 70,
City: `Koln`,
Country: `Germany`,
Phone: `609-502-525`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
Title: `Senior Software Developer`
})]
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
this._bind = () => {
treeGrid.data = this.employeesNestedData;
}
this._bind();
}
private _employeesNestedData: EmployeesNestedData = null;
public get employeesNestedData(): EmployeesNestedData {
if (this._employeesNestedData == null)
{
this._employeesNestedData = new EmployeesNestedData();
}
return this._employeesNestedData;
}
}
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-tree-grid
auto-generate="false"
name="treeGrid"
id="treeGrid"
id="treeGrid"
child-data-key="Employees">
<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="ID"
header="ID"
data-type="number">
</igc-column>
<igc-column
field="Name"
header="Name"
data-type="string">
</igc-column>
<igc-column
field="HireDate"
header="Hire Date"
data-type="date">
</igc-column>
<igc-column
field="Age"
header="Age"
data-type="number">
</igc-column>
<igc-column
field="salary"
header="Salary"
data-type="number">
</igc-column>
<igc-column
field="productivity"
header="Productivity"
data-type="number">
</igc-column>
</igc-tree-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
이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.
다중 열 머리글 그리드 내보내기
이제 내보낼 수 있습니다. IgcTreeGridComponent 정의된 다중 열 머리글. 모든 헤더는 내보낸 Excel 파일에 표시되는 대로 반영됩니다. IgcTreeGridComponent. 내보낸 데이터에서 정의된 다중 열 헤더를 제외하려면 ExporterOption IgnoreMultiColumnHeaders 받는 사람 true.
Excel 표는 여러 열 머리글을 지원하지 않으므로 내보낸 IgcTreeGridComponent는 표로 서식이 지정되지 않습니다.
export class EmployeesFlatDetailsItem {
public constructor(init: Partial<EmployeesFlatDetailsItem>) {
Object.assign(this, init);
}
public Address: string;
public Age: number;
public City: string;
public Country: string;
public Fax: string;
public HireDate: string;
public ID: number;
public Name: string;
public ParentID: number;
public Phone: string;
public PostalCode: number;
public Title: string;
public LastName: string;
public FullAddress: string;
}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new EmployeesFlatDetailsItem(
{
Address: `Obere Str. 57`,
Age: 55,
City: `Berlin`,
Country: `Germany`,
Fax: `030-0076545`,
HireDate: `2008-03-20`,
ID: 1,
Name: `Johnathan Winchester`,
ParentID: -1,
Phone: `030-0074321`,
PostalCode: 12209,
Title: `Development Manager`,
LastName: `Winchester`,
FullAddress: `Obere Str. 57, Berlin, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `Avda. de la Constitución 2222`,
Age: 42,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(51) 555-3745`,
HireDate: `2014-01-22`,
ID: 4,
Name: `Ana Sanders`,
ParentID: -1,
Phone: `(5) 555-4729`,
PostalCode: 5021,
Title: `CEO`,
LastName: `Sanders`,
FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `Mataderos 2312`,
Age: 49,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(5) 555-3995`,
HireDate: `2014-01-22`,
ID: 18,
Name: `Victoria Lincoln`,
ParentID: -1,
Phone: `(5) 555-3932`,
PostalCode: 5023,
Title: `Accounting Manager`,
LastName: `Lincoln`,
FullAddress: `Mataderos 2312, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `120 Hanover Sq.`,
Age: 61,
City: `London`,
Country: `UK`,
Fax: `(171) 555-6750`,
HireDate: `2010-01-01`,
ID: 10,
Name: `Yang Wang`,
ParentID: -1,
Phone: `(171) 555-7788`,
PostalCode: 39000,
Title: `Localization Manager`,
LastName: `Wang`,
FullAddress: `120 Hanover Sq., London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Berguvsvägen 8`,
Age: 43,
City: `Luleå`,
Country: `Sweden`,
Fax: `0921-12 34 67`,
HireDate: `2011-06-03`,
ID: 3,
Name: `Michael Burke`,
ParentID: 1,
Phone: `0921-12 34 65`,
PostalCode: 29000,
Title: `Senior Software Developer`,
LastName: `Burke`,
FullAddress: `Berguvsvägen 8, Luleå, Sweden`
}),
new EmployeesFlatDetailsItem(
{
Address: `Forsterstr. 57`,
Age: 29,
City: `Mannheim`,
Country: `Germany`,
Fax: `0621-08924`,
HireDate: `2009-06-19`,
ID: 2,
Name: `Thomas Anderson`,
ParentID: 1,
Phone: `0621-08460`,
PostalCode: 68306,
Title: `Senior Software Developer`,
LastName: `Anderson`,
FullAddress: `Forsterstr. 57, Mannheim, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `24, place Kléber`,
Age: 31,
City: `Strasbourg`,
Country: `France`,
Fax: `88.60.15.32`,
HireDate: `2014-08-18`,
ID: 11,
Name: `Monica Reyes`,
ParentID: 1,
Phone: `88.60.15.31`,
PostalCode: 67000,
Title: `Software Development Team Lead`,
LastName: `Reyes`,
FullAddress: `24, place Kléber, Strasbourg, France`
}),
new EmployeesFlatDetailsItem(
{
Address: `C/ Araquil, 67`,
Age: 35,
City: `Madrid`,
Country: `Spain`,
Fax: `(911) 555 91 99`,
HireDate: `2015-09-17`,
ID: 6,
Name: `Roland Mendel`,
ParentID: 11,
Phone: `(91) 555 22 82`,
PostalCode: 28023,
Title: `Senior Software Developer`,
LastName: `Mendel`,
FullAddress: `C/ Araquil, 67, Madrid, Spain`
}),
new EmployeesFlatDetailsItem(
{
Address: `12, rue des Bouchers`,
Age: 44,
City: `Marseille`,
Country: `France`,
Fax: `91.24.45.41`,
HireDate: `2009-10-11`,
ID: 12,
Name: `Sven Cooper`,
ParentID: 11,
Phone: `91.24.45.40`,
PostalCode: 13008,
Title: `Senior Software Developer`,
LastName: `Cooper`,
FullAddress: `12, rue des Bouchers, Marseille, France`
}),
new EmployeesFlatDetailsItem(
{
Address: `23 Tsawassen Blvd.`,
Age: 44,
City: `Tsawassen`,
Country: `Canada`,
Fax: `(604) 555-3745`,
HireDate: `2014-04-04`,
ID: 14,
Name: `Laurence Johnson`,
ParentID: 4,
Phone: `(604) 555-4729`,
PostalCode: 19000,
Title: `Director`,
LastName: `Johnson`,
FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada`
}),
new EmployeesFlatDetailsItem(
{
Address: `Fauntleroy Circus`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(125) 555-3798`,
HireDate: `2017-11-9`,
ID: 5,
Name: `Elizabeth Richards`,
ParentID: 4,
Phone: `(171) 555-1212`,
PostalCode: 30000,
Title: `Vice President`,
LastName: `Richards`,
FullAddress: `Fauntleroy Circus, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Cerrito 333`,
Age: 39,
City: `Buenos Aires`,
Country: `Argentina`,
Fax: `(121) 135-4892`,
HireDate: `2010-03-22`,
ID: 13,
Name: `Trevor Ashworth`,
ParentID: 5,
Phone: `(1) 135-5555`,
PostalCode: 1010,
Title: `Director`,
LastName: `Ashworth`,
FullAddress: `Cerrito 333, Buenos Aires, Argentina`
}),
new EmployeesFlatDetailsItem(
{
Address: `Sierras de Granada 9993`,
Age: 44,
City: `México D.F.`,
Country: `Mexico`,
Fax: `(153) 555-7293`,
HireDate: `2014-04-04`,
ID: 17,
Name: `Antonio Moreno`,
ParentID: 18,
Phone: `(5) 555-3392`,
PostalCode: 5022,
Title: `Senior Accountant`,
LastName: `Moreno`,
FullAddress: `Sierras de Granada 9993, México D.F., Mexico`
}),
new EmployeesFlatDetailsItem(
{
Address: `Hauptstr. 29`,
Age: 50,
City: `Sao Paulo`,
Country: `Brazil`,
Fax: `(531) 555-6691`,
HireDate: `2007-11-18`,
ID: 7,
Name: `Pedro Rodriguez`,
ParentID: 10,
Phone: `0452-076545`,
PostalCode: 3012,
Title: `Senior Localization Developer`,
LastName: `Rodriguez`,
FullAddress: `Hauptstr. 29, Sao Paulo, Brazil`
}),
new EmployeesFlatDetailsItem(
{
Address: `Av. dos Lusíadas, 23`,
Age: 27,
City: `Bern`,
Country: `Switzerland`,
Fax: `(271) 335-357`,
HireDate: `2016-02-19`,
ID: 8,
Name: `Casey Harper`,
ParentID: 10,
Phone: `(11) 555-7647`,
PostalCode: 40000,
Title: `Senior Localization`,
LastName: `Harper`,
FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland`
}),
new EmployeesFlatDetailsItem(
{
Address: `Berkeley Gardens 12`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(171) 555-9199`,
HireDate: `2017-11-09`,
ID: 15,
Name: `Patricia Simpson`,
ParentID: 7,
Phone: `(171) 555-2282`,
PostalCode: 26000,
Title: `Localization Intern`,
LastName: `Simpson`,
FullAddress: `Berkeley Gardens 12, London, UK`
}),
new EmployeesFlatDetailsItem(
{
Address: `Walserweg 21`,
Age: 39,
City: `Aachen`,
Country: `Germany`,
Fax: `0241-059428`,
HireDate: `2010-03-22`,
ID: 9,
Name: `Francisco Chang`,
ParentID: 7,
Phone: `0241-039123`,
PostalCode: 52066,
Title: `Localization Intern`,
LastName: `Chang`,
FullAddress: `Walserweg 21, Aachen, Germany`
}),
new EmployeesFlatDetailsItem(
{
Address: `35 King George`,
Age: 25,
City: `London`,
Country: `UK`,
Fax: `(171) 555-3373`,
HireDate: `2018-03-18`,
ID: 16,
Name: `Peter Lewis`,
ParentID: 7,
Phone: `(171) 555-0297`,
PostalCode: 48000,
Title: `Localization Intern`,
LastName: `Lewis`,
FullAddress: `35 King George, London, UK`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule, WebGridToolbarDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcGridToolbarExporterComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import { IgcGridComponent, IgcExporterEventArgs } from 'igniteui-webcomponents-grids/grids';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private gridToolbarExporter1: IgcGridToolbarExporterComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var gridToolbarExporter1 = this.gridToolbarExporter1 = document.getElementById('gridToolbarExporter1') as IgcGridToolbarExporterComponent;
this.webGridExportEventMultiColumnHeaders = this.webGridExportEventMultiColumnHeaders.bind(this);
this._bind = () => {
treeGrid.data = this.employeesFlatDetails;
gridToolbarExporter1.addEventListener("exportStarted", this.webGridExportEventMultiColumnHeaders);
}
this._bind();
}
private _employeesFlatDetails: EmployeesFlatDetails = null;
public get employeesFlatDetails(): EmployeesFlatDetails {
if (this._employeesFlatDetails == null)
{
this._employeesFlatDetails = new EmployeesFlatDetails();
}
return this._employeesFlatDetails;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebGridDescriptionModule.register(context);
WebGridToolbarDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webGridExportEventMultiColumnHeaders(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-tree-grid
auto-generate="false"
name="treeGrid"
id="treeGrid"
id="treeGrid"
foreign-key="ParentID"
primary-key="ID">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-pinning
>
</igc-grid-toolbar-pinning>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
<igc-grid-toolbar-exporter
export-csv="false"
export-excel="true"
name="gridToolbarExporter1"
id="gridToolbarExporter1">
</igc-grid-toolbar-exporter>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="ID"
header="ID"
resizable="true"
filterable="false">
</igc-column>
<igc-column
field="Name"
header="Name"
resizable="true"
sortable="true"
width="200px">
</igc-column>
<igc-column-group
header="General Information">
<igc-column
field="HireDate"
header="HireDate"
data-type="date"
resizable="true"
sortable="true">
</igc-column>
<igc-column-group
header="Personal Details">
<igc-column
header="Title"
field="Title"
resizable="true"
sortable="true">
</igc-column>
<igc-column
header="Age"
field="Age"
data-type="number"
resizable="true"
sortable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
<igc-column-group
header="Address Information">
<igc-column-group
header="Location">
<igc-column
header="Country"
field="Country"
resizable="true"
sortable="true">
</igc-column>
<igc-column
field="City"
header="City"
resizable="true"
sortable="true">
</igc-column>
<igc-column
header="Address"
field="Address"
resizable="true"
sortable="true">
</igc-column>
</igc-column-group>
<igc-column-group
header="Contact Information">
<igc-column
header="Phone"
field="Phone"
resizable="true"
sortable="true">
</igc-column>
<igc-column
header="Fax"
field="Fax"
resizable="true"
sortable="true">
</igc-column>
<igc-column
header="PostalCode"
field="PostalCode"
resizable="true"
sortable="true">
</igc-column>
</igc-column-group>
</igc-column-group>
</igc-tree-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
고정된 열 헤더가 있는 그리드 내보내기
기본적으로 Excel 내보내기 서비스는 스크롤 가능한(고정 해제된) 열 머리글과 함께 그리드를 내보냅니다. 사용자가 레코드를 스크롤할 때 항상 표시되도록 내보낸 Excel 파일 위에 모든 헤더를 고정하려는 시나리오가 있습니다. 이를 달성하려면 ExporterOption FreezeHeaders true로 설정할 수 있습니다.
constructor() {
var gridToolbarExporter1 = document.getElementById('gridToolbarExporter1') as IgcGridToolbarExporterComponent;
gridToolbarExporter1.addEventListener("exportStarted", this.webGridExportEventFreezeHeaders);
}
public webGridExportEventFreezeHeaders(args: any): void {
args.detail.options.freezeHeaders = true;
}
ts알려진 제한 사항
| 한정 | 설명 |
|---|---|
| 계층 수준 | Excel 내보내기 서비스는 최대 8개 수준의 계층 구조를 생성할 수 있습니다. |
| 최대 워크시트 크기 | Excel에서 지원되는 최대 워크시트 크기는 1,048,576행 x 16,384열입니다. |
| 셀 스타일링 | Excel 내보내기 서비스는 셀 구성 요소에 적용된 사용자 정의 스타일 내보내기를 지원하지 않습니다. 이러한 시나리오에서는 Excel 라이브러리를 사용하는 것이 좋습니다. |
API 참조
ExcelExporterServiceExcelExporterOptionsIgcTreeGridComponent
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.