@progress/kendo-angular-excel-export
Version:
Kendo UI for Angular Excel Export component
512 lines (497 loc) • 21.4 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import * as i0 from '@angular/core';
import { QueryList, NgZone, TemplateRef } from '@angular/core';
import { WorkbookSheetRowCellBorderBottom, WorkbookSheetRowCellBorderLeft, WorkbookSheetRowCellBorderTop, WorkbookSheetRowCellBorderRight, WorkbookOptions } from '@progress/kendo-ooxml';
export * from '@progress/kendo-ooxml';
import { LocalizationService } from '@progress/kendo-angular-l10n';
/**
* The options for the Excel Export cell.
*/
interface CellOptions {
/**
* Sets the background color of the cell.
* Supports hex CSS-like values that start with `"#"`. For example, `"#ff00ff"`.
*/
background?: string;
/**
* The style information for the bottom border of the cell.
*/
borderBottom?: WorkbookSheetRowCellBorderBottom;
/**
* The style information for the left border of the cell.
*/
borderLeft?: WorkbookSheetRowCellBorderLeft;
/**
* The style information for the top border of the cell.
*/
borderTop?: WorkbookSheetRowCellBorderTop;
/**
* The style information for the right border of the cell.
*/
borderRight?: WorkbookSheetRowCellBorderRight;
/**
* If set to `true`, renders the cell value in bold.
*/
bold?: boolean;
/**
* The text color of the cell.
* Supports hex CSS-like values that start with `"#"`. For example, `"#ff00ff"`.
*/
color?: string;
/**
* Sets the font that is used to display the cell value.
*/
fontFamily?: string;
/**
* Sets the font size in pixels.
*/
fontSize?: number;
/**
* Sets the format that Excel uses to display the cell value.
* For more information, refer to the page on
* [supported Excel formats](https://support.office.com/en-us/article/Create-or-delete-a-custom-number-format-78f2a361-936b-4c03-8772-09fab54be7f4?ui=en-US&rs=en-US&ad=US).
*/
format?: string;
/**
* If `italics` is set to `true`, the cell value is rendered in italics.
*/
italic?: boolean;
/**
* Sets the horizontal alignment of the cell value.
*
* The supported values are:
* * `"left"`
* * `"center"`
* * `"right"`
*/
textAlign?: 'left' | 'center' | 'right';
/**
* If `underline` is set to `true`, the cell value is underlined.
*/
underline?: boolean;
/**
* If `wrap` is set to `true`, the cell value is wrapped.
*/
wrap?: boolean;
/**
* Sets the vertical alignment of the cell value.
*
* The supported values are:
* * `"top"`
* * `"center"`
* * `"bottom"`
*/
verticalAlign?: 'top' | 'center' | 'bottom';
}
/**
* Represents the expected type for the `ExcelExportComponent` data.
*
* Use this interface to specify the data and groups for export.
*/
interface ExcelExportData {
/**
* Specifies the exported data.
* When the data is grouped, structure it as described by the
* [`GroupResult`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/groupresult) option of the Kendo UI Data Query component.
*/
data?: any[];
/**
* Specifies the exported data groups.
* The groups must match the
* [`GroupDescriptor`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/groupdescriptor) option of the Kendo UI Data Query component.
*/
group?: any[];
}
/**
* @hidden
*/
declare class ColumnBase {
parent?: ColumnBase;
/**
* The title of the column.
*/
set title(value: string);
get title(): string;
/**
* The width of the column in pixels.
*/
set width(value: number);
get width(): number;
/**
* Toggles the locked (frozen) state of the column ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/columns#locked-state)).
*
* @default false
*/
set locked(value: boolean);
get locked(): boolean;
/**
* Sets the visibility of the column ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/columns#hidden-state)).
*
* @default false
*/
set hidden(value: boolean);
get hidden(): boolean;
/**
* The options of the column header cell.
*/
set headerCellOptions(value: CellOptions);
get headerCellOptions(): CellOptions;
/**
* @hidden
*/
children: QueryList<ColumnBase>;
/**
* @hidden
*/
get level(): number;
private _title;
private _width;
private _locked;
private _hidden;
private _headerCellOptions;
constructor(parent?: ColumnBase);
static ɵfac: i0.ɵɵFactoryDeclaration<ColumnBase, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ColumnBase, "ng-component", never, { "title": { "alias": "title"; "required": false; }; "width": { "alias": "width"; "required": false; }; "locked": { "alias": "locked"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "headerCellOptions": { "alias": "headerCellOptions"; "required": false; }; }, {}, ["children"], never, true, never>;
}
/**
* Represents the [Kendo UI Excel Export component for Angular](https://www.telerik.com/kendo-angular-ui/components/excel-export).
* Use this component to export data to Excel format.
*
* @example
* ```html
* <kendo-excelexport [data]="gridData" fileName="MyExport.xlsx">
* <kendo-excelexport-column field="ProductID" title="Product ID"></kendo-excelexport-column>
* <kendo-excelexport-column field="ProductName" title="Product Name"></kendo-excelexport-column>
* </kendo-excelexport>
* ```
*
* @remarks
* Supported children components are: {@link ColumnComponent}, {@link ColumnGroupComponent}.
*/
declare class ExcelExportComponent {
private localization;
private zone;
/**
* Specifies the name of the exported Excel file.
*
* @default "Export.xlsx"
*/
set fileName(value: string);
get fileName(): string;
/**
* Determines whether to enable column filtering in the exported Excel file
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/filtering)).
*/
set filterable(value: boolean);
get filterable(): boolean;
/**
* Determines whether groups in the Excel file are collapsible.
*/
set collapsible(value: boolean);
get collapsible(): boolean;
/**
* Specifies the author of the workbook.
*/
set creator(value: string);
get creator(): string;
/**
* Specifies the creation date of the workbook.
* The default value is `new Date()`.
*
* @default `new Date()`
*/
set date(value: Date);
get date(): Date;
/**
* Determines whether to force the use of a proxy server for file downloads.
* When set to `true`, the component sends content to `proxyURL` even if the browser supports local file saving.
*/
set forceProxy(value: boolean);
get forceProxy(): boolean;
/**
* Specifies the URL of the server-side proxy that streams the file to the user.
* When the browser cannot save files locally (for example, Internet Explorer 9 and earlier, and Safari), the component uses a proxy.
* You must implement the server-side proxy.
*
* The proxy receives a `POST` request with these parameters in the request body:
* - `contentType`—The `MIME` type of the file.
* - `base64`—The `base-64` encoded file content.
* - `fileName`—The requested file name.
* The proxy must return the decoded file with the `Content-Disposition` header set to `attachment; filename="<fileName.xslx>"`.
*/
set proxyURL(value: string);
get proxyURL(): string;
/**
* Specifies the data to export.
* When the data is grouped, structure it as described by the
* [`GroupResult`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/groupresult) option of the Kendo UI Data Query component.
*/
set data(value: any[]);
get data(): any[];
/**
* Specifies the exported data groups.
* The groups must match the
* [`GroupDescriptor`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/groupdescriptor) option of the Kendo UI Data Query component.
*/
set group(value: any[]);
get group(): any[];
/**
* Specifies the options for cells inserted before data, group, and footer cells
* to show group hierarchy when the data is grouped
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/cells#padding-cells)).
*/
set paddingCellOptions(value: CellOptions);
get paddingCellOptions(): CellOptions;
/**
* Specifies the options for cells inserted before header cells
* to align headers and column values when the data is grouped
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/cells#header-padding-cells)).
*/
set headerPaddingCellOptions(value: CellOptions);
get headerPaddingCellOptions(): CellOptions;
/**
* @hidden
*/
columns: QueryList<ColumnBase>;
private _fileName;
private _filterable;
private _collapsible;
private _creator;
private _date;
private _forceProxy;
private _proxyURL;
private _data;
private _group;
private _paddingCellOptions;
private _headerPaddingCellOptions;
constructor(localization: LocalizationService, zone: NgZone);
/**
* Exports the data to Excel.
*
* @param exportData - Optional. The data to export or [`WorkbookOptions`](https://www.telerik.com/kendo-angular-ui/components/excel-export/api/workbookoptions).
*/
save(exportData?: any[] | ExcelExportData | WorkbookOptions): void;
/**
* Returns [`WorkbookOptions`](https://www.telerik.com/kendo-angular-ui/components/excel-export/api/workbookoptions) based on the specified columns and data.
* Use this method to customize the workbook options.
*
* @param exportData - Optional. The data to export.
* @returns {WorkbookOptions} The workbook options.
*/
workbookOptions(exportData?: any[] | ExcelExportData): WorkbookOptions;
/**
* Returns a promise that resolves with the file data URI.
* Use this method to get the Excel file as a data URI.
*
* @param exportData - Optional. The data or [`WorkbookOptions`](https://www.telerik.com/kendo-angular-ui/components/excel-export/api/workbookoptions) to use for generating the data URI.
* @returns {Promise<string>} A promise that resolves with the file data URI.
*/
toDataURL(exportData?: any[] | ExcelExportData | WorkbookOptions): Promise<string>;
protected getExportData(exportData?: ExcelExportData | any[]): ExcelExportData;
protected saveFile(dataURL: string): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ExcelExportComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ExcelExportComponent, "kendo-excelexport", ["kendoExcelExport"], { "fileName": { "alias": "fileName"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "collapsible": { "alias": "collapsible"; "required": false; }; "creator": { "alias": "creator"; "required": false; }; "date": { "alias": "date"; "required": false; }; "forceProxy": { "alias": "forceProxy"; "required": false; }; "proxyURL": { "alias": "proxyURL"; "required": false; }; "data": { "alias": "data"; "required": false; }; "group": { "alias": "group"; "required": false; }; "paddingCellOptions": { "alias": "paddingCellOptions"; "required": false; }; "headerPaddingCellOptions": { "alias": "headerPaddingCellOptions"; "required": false; }; }, {}, ["columns"], never, true, never>;
}
/**
* Represents the group header cell template of the Excel Export column component
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/columns#group-header-template)).
* Use this directive to customize the content of the group header item.
*
* @example
* ```html
* <ng-template kendoExcelExportGroupHeaderTemplate let-group let-field="field">
* Group Header for {{ field }}
* </ng-template>
* ```
*/
declare class GroupHeaderTemplateDirective {
templateRef: TemplateRef<any>;
constructor(templateRef: TemplateRef<any>);
static ɵfac: i0.ɵɵFactoryDeclaration<GroupHeaderTemplateDirective, [{ optional: true; }]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GroupHeaderTemplateDirective, "[kendoExcelExportGroupHeaderTemplate]", never, {}, {}, never, never, true, never>;
}
/**
* Represents the group header column template of the Excel Export column component
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/columns#group-header-column-template)).
* Use this directive to customize the group header column.
*
* @example
* ```html
* <ng-template kendoExcelExportGroupHeaderColumnTemplate let-group let-field="field">
* Group Header Column for {{ field }}
* </ng-template>
* ```
*/
declare class GroupHeaderColumnTemplateDirective {
templateRef: TemplateRef<any>;
constructor(templateRef: TemplateRef<any>);
static ɵfac: i0.ɵɵFactoryDeclaration<GroupHeaderColumnTemplateDirective, [{ optional: true; }]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GroupHeaderColumnTemplateDirective, "[kendoExcelExportGroupHeaderColumnTemplate]", never, {}, {}, never, never, true, never>;
}
/**
* Represents the group footer cell template of the Excel Export column component
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/columns#group-footer-template)).
* Use this directive to customize the group footer cell of a column.
*
* @example
* ```html
* <ng-template kendoExcelExportGroupFooterTemplate let-group let-field="field">
* Group Footer for {{ field }}
* </ng-template>
* ```
*/
declare class GroupFooterTemplateDirective {
templateRef: TemplateRef<any>;
constructor(templateRef: TemplateRef<any>);
static ɵfac: i0.ɵɵFactoryDeclaration<GroupFooterTemplateDirective, [{ optional: true; }]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GroupFooterTemplateDirective, "[kendoExcelExportGroupFooterTemplate]", never, {}, {}, never, never, true, never>;
}
/**
* Represents the footer cell template of the Excel Export column component
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/columns#footer-template)).
* Use this directive to customize the footer cell of a column.
*
* @example
* ```html
* <ng-template kendoExcelExportFooterTemplate let-column let-columnIndex="columnIndex">
* Footer for {{ column.field }}
* </ng-template>
* ```
*/
declare class FooterTemplateDirective {
templateRef: TemplateRef<any>;
constructor(templateRef: TemplateRef<any>);
static ɵfac: i0.ɵɵFactoryDeclaration<FooterTemplateDirective, [{ optional: true; }]>;
static ɵdir: i0.ɵɵDirectiveDeclaration<FooterTemplateDirective, "[kendoExcelExportFooterTemplate]", never, {}, {}, never, never, true, never>;
}
/**
* Represents a column in the Kendo UI Excel Export component for Angular.
* Use this component to define the structure and options for each column.
*
* @example
* ```html
* <kendo-excelexport-column field="ProductName"></kendo-excelexport-column>
* ```
*/
declare class ColumnComponent extends ColumnBase {
/**
* Specifies the field that the column displays.
*/
set field(value: string);
get field(): string;
/**
* Specifies options for the column's data cells
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/cells#data-cells)).
*/
set cellOptions(value: CellOptions);
get cellOptions(): CellOptions;
/**
* Specifies options for the group header cells of the column
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/cells#header-cells)).
*/
set groupHeaderCellOptions(value: CellOptions);
get groupHeaderCellOptions(): CellOptions;
/**
* Specifies options for the group footer cells of the column
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/cells#group-footer-cells)).
*/
set groupFooterCellOptions(value: CellOptions);
get groupFooterCellOptions(): CellOptions;
/**
* Specifies options for the footer cell of the column
* ([see example](https://www.telerik.com/kendo-angular-ui/components/excel-export/cells#footer-cells)).
*/
set footerCellOptions(value: CellOptions);
get footerCellOptions(): CellOptions;
/**
* @hidden
*/
groupHeaderTemplate: GroupHeaderTemplateDirective;
/**
* @hidden
*/
groupHeaderColumnTemplate: GroupHeaderColumnTemplateDirective;
/**
* @hidden
*/
groupFooterTemplate: GroupFooterTemplateDirective;
/**
* @hidden
*/
footerTemplate: FooterTemplateDirective;
private _field;
private _cellOptions;
private _groupHeaderCellOptions;
private _groupFooterCellOptions;
private _footerCellOptions;
constructor(parent?: ColumnBase);
static ɵfac: i0.ɵɵFactoryDeclaration<ColumnComponent, [{ optional: true; host: true; skipSelf: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<ColumnComponent, "kendo-excelexport-column", never, { "field": { "alias": "field"; "required": false; }; "cellOptions": { "alias": "cellOptions"; "required": false; }; "groupHeaderCellOptions": { "alias": "groupHeaderCellOptions"; "required": false; }; "groupFooterCellOptions": { "alias": "groupFooterCellOptions"; "required": false; }; "footerCellOptions": { "alias": "footerCellOptions"; "required": false; }; }, {}, ["groupHeaderTemplate", "groupHeaderColumnTemplate", "groupFooterTemplate", "footerTemplate"], never, true, never>;
}
/**
* Represents a group of columns in the Kendo UI Excel Export component.
* Use this component to organize columns into groups.
*
* @example
* ```html
* <kendo-excelexport-column-group>
* <kendo-excelexport-column field="ProductName"></kendo-excelexport-column>
* <kendo-excelexport-column field="UnitPrice"></kendo-excelexport-column>
* </kendo-excelexport-column-group>
* ```
*/
declare class ColumnGroupComponent extends ColumnBase {
parent?: ColumnBase;
constructor(parent?: ColumnBase);
static ɵfac: i0.ɵɵFactoryDeclaration<ColumnGroupComponent, [{ optional: true; host: true; skipSelf: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<ColumnGroupComponent, "kendo-excelexport-column-group", never, {}, {}, never, never, true, never>;
}
/**
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the Excel Export component.
*
* Use this module to enable Excel export features in your application.
*
* @example
* ```typescript
* import { ExcelExportModule } from '@progress/kendo-angular-excel-export';
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
* import { NgModule } from '@angular/core';
* import { AppComponent } from './app.component';
*
* @NgModule({
* declarations: [AppComponent],
* imports: [BrowserModule, ExcelExportModule],
* bootstrap: [AppComponent]
* })
* export class AppModule {}
*
* platformBrowserDynamic().bootstrapModule(AppModule);
* ```
*/
declare class ExcelExportModule {
static ɵfac: i0.ɵɵFactoryDeclaration<ExcelExportModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ExcelExportModule, never, [typeof ExcelExportComponent, typeof ColumnComponent, typeof ColumnGroupComponent, typeof FooterTemplateDirective, typeof GroupFooterTemplateDirective, typeof GroupHeaderColumnTemplateDirective, typeof GroupHeaderTemplateDirective], [typeof ExcelExportComponent, typeof ColumnComponent, typeof ColumnGroupComponent, typeof FooterTemplateDirective, typeof GroupFooterTemplateDirective, typeof GroupHeaderColumnTemplateDirective, typeof GroupHeaderTemplateDirective]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ExcelExportModule>;
}
/**
*
* @hidden
*/
declare const workbookOptions: (options: any) => WorkbookOptions;
/**
* @hidden
*/
declare const toDataURL: (options: WorkbookOptions) => Promise<string>;
/**
* @hidden
*/
declare const isWorkbookOptions: (value: any) => boolean;
/**
* Use this utility array to access all `@progress/kendo-angular-excel-export` related components and directives.
*/
declare const KENDO_EXCELEXPORT: readonly [typeof ExcelExportComponent, typeof ColumnComponent, typeof ColumnGroupComponent, typeof FooterTemplateDirective, typeof GroupFooterTemplateDirective, typeof GroupHeaderColumnTemplateDirective, typeof GroupHeaderTemplateDirective];
export { ColumnBase, ColumnComponent, ColumnGroupComponent, ExcelExportComponent, ExcelExportModule, FooterTemplateDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderTemplateDirective, KENDO_EXCELEXPORT, isWorkbookOptions, toDataURL, workbookOptions };
export type { CellOptions, ExcelExportData };