@progress/kendo-angular-excel-export
Version:
Kendo UI for Angular Excel Export component
230 lines (229 loc) • 9.39 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
// eslint-disable max-line-length
import { Component, ContentChildren, Input, QueryList, NgZone } from '@angular/core';
import { saveAs } from '@progress/kendo-file-saver';
import { workbookOptions, toDataURL, isWorkbookOptions } from './ooxml/workbook';
import { ColumnBase } from './columns/column-base';
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from './package-metadata';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
* Represents the [Kendo UI Excel Export component for Angular]({% slug overview_excelexport %}).
* 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}.
*/
export class ExcelExportComponent {
localization;
zone;
/**
* Specifies the name of the exported Excel file.
*
* @default "Export.xlsx"
*/
fileName = 'Export.xlsx';
/**
* Determines whether to enable column filtering in the exported Excel file
* ([see example]({% slug filtering_excelexport %})).
*/
filterable;
/**
* Determines whether groups in the Excel file are collapsible.
*/
collapsible;
/**
* Specifies the author of the workbook.
*/
creator;
/**
* Specifies the creation date of the workbook.
* The default value is `new Date()`.
*
* @default `new 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.
*/
forceProxy;
/**
* 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>"`.
*/
proxyURL;
/**
* Specifies the data to export.
* When the data is grouped, structure it as described by the
* [`GroupResult`]({% slug api_kendo-data-query_groupresult %}) option of the Kendo UI Data Query component.
*/
data;
/**
* Specifies the exported data groups.
* The groups must match the
* [`GroupDescriptor`]({% slug api_kendo-data-query_groupdescriptor %}) option of the Kendo UI Data Query component.
*/
group;
/**
* Specifies the options for cells inserted before data, group, and footer cells
* to show group hierarchy when the data is grouped
* ([see example]({% slug cells_excelexport %}#toc-padding-cells)).
*/
paddingCellOptions;
/**
* Specifies the options for cells inserted before header cells
* to align headers and column values when the data is grouped
* ([see example]({% slug cells_excelexport %}#toc-header-padding-cells)).
*/
headerPaddingCellOptions;
/**
* @hidden
*/
columns = new QueryList();
constructor(localization, zone) {
this.localization = localization;
this.zone = zone;
validatePackage(packageMetadata);
this.saveFile = this.saveFile.bind(this);
}
/**
* Exports the data to Excel.
*
* @param exportData - Optional. The data to export or [`WorkbookOptions`]({% slug api_excel-export_workbookoptions %}).
*/
save(exportData) {
this.toDataURL(exportData).then(this.saveFile);
}
/**
* Returns [`WorkbookOptions`]({% slug api_excel-export_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) {
const currentData = this.getExportData(exportData);
const options = workbookOptions({
columns: this.columns,
data: currentData.data,
group: currentData.group,
filterable: this.filterable,
creator: this.creator,
date: this.date,
rtl: this.localization.rtl,
paddingCellOptions: this.paddingCellOptions,
headerPaddingCellOptions: this.headerPaddingCellOptions,
collapsible: this.collapsible
});
return options;
}
/**
* 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`]({% slug api_excel-export_workbookoptions %}) to use for generating the data URI.
* @returns {Promise<string>} A promise that resolves with the file data URI.
*/
toDataURL(exportData) {
const options = isWorkbookOptions(exportData) ?
exportData :
this.workbookOptions(exportData);
return this.zone.runOutsideAngular(() => toDataURL(options));
}
getExportData(exportData) {
let result;
if (exportData) {
if (Array.isArray(exportData)) {
result = {
data: exportData
};
}
else {
result = exportData;
}
}
else {
result = {
data: this.data,
group: this.group
};
}
return result;
}
saveFile(dataURL) {
saveAs(dataURL, this.fileName, {
forceProxy: this.forceProxy,
proxyURL: this.proxyURL
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelExportComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ExcelExportComponent, isStandalone: true, selector: "kendo-excelexport", inputs: { fileName: "fileName", filterable: "filterable", collapsible: "collapsible", creator: "creator", date: "date", forceProxy: "forceProxy", proxyURL: "proxyURL", data: "data", group: "group", paddingCellOptions: "paddingCellOptions", headerPaddingCellOptions: "headerPaddingCellOptions" }, providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.excelexport'
}
], queries: [{ propertyName: "columns", predicate: ColumnBase, descendants: true }], exportAs: ["kendoExcelExport"], ngImport: i0, template: ``, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExcelExportComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoExcelExport',
selector: 'kendo-excelexport',
providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.excelexport'
}
],
template: ``,
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { fileName: [{
type: Input
}], filterable: [{
type: Input
}], collapsible: [{
type: Input
}], creator: [{
type: Input
}], date: [{
type: Input
}], forceProxy: [{
type: Input
}], proxyURL: [{
type: Input
}], data: [{
type: Input
}], group: [{
type: Input
}], paddingCellOptions: [{
type: Input
}], headerPaddingCellOptions: [{
type: Input
}], columns: [{
type: ContentChildren,
args: [ColumnBase, { descendants: true }]
}] } });