Angular Pivot Grid Excel を Excel サービスへエクスポート
Angular Excel Exporter の例
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxPivotGridModule,
IgxExcelExporterService
} from "igniteui-angular" ;
import { PivotExportComponent } from "./pivot-grid/pivot-export/pivot-export.component" ;
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
PivotExportComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxPreventDocumentScrollModule,
IgxPivotGridModule
],
providers : [IgxExcelExporterService],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, ViewChild } from "@angular/core" ;
import {
IPivotConfiguration, PivotAggregation, IgxPivotNumericAggregate, IgxPivotDateDimension,
IgxExcelExporterService, IgxExcelExporterOptions, IgxPivotGridComponent
} 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'
})
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 ="raised" (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' >
</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 コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Pivot Grid のデータのエクスポート
IgniteUI Excel Exporter を使用するには、IgxExcelExporterService
を app.module.ts ファイルにインポートし、providers
配列にサービスを追加します。
import { IgxExcelExporterService } from 'igniteui-angular' ;
@NgModule ({
providers : [ IgxExcelExporterService ]
})
export class AppModule {}
typescript
v12.2.1 以降では、エクスポーター サービスは root で提供されます。つまり、AppModule プロバイダーでそれらを宣言する必要はありません。
エクスポート処理の開始は、コンポーネントのテンプレートでボタンのハンドラーを使用します。
<igx-pivot-grid #pivotGrid [data ]="localData" [pivotConfiguration ]="pivotConfig" > </igx-pivot-grid >
<button (click )="exportButtonHandler()" > Export IgxPivotGrid to Excel</button >
html
エクスポーター サービスへのアクセスは、コンポーネントのコンストラクターで IgxExcelExporterService
型の引数を定義し、Angular フレームワークはサービスのインスタンスを提供します。データを MS Excel 形式でエクスポートするには、エクスポーター サービスの export
メソッドを呼び出して IgxPivotGrid コンポーネントを最初の引数として渡します。
以下のコードはコンポーネントの typescript ファイルでエクスポート処理を実行します。
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
上記をすべて行うと、IgxPivotGrid コンポーネントとその下にボタンを確認できます。ボタンを押すととエクスポート処理をトリガーし、ブラウザーで ExportedDataFile.xlsx ファイルをダウンロードします。このファイルは MS Excel 形式の Pivot Grid のデータを含みます。
Excel の展開/縮小インジケーターは、ピボット グリッドの最後のディメンションの階層に基づいて表示されます。
Excel テーブルは複数の行ヘッダーをサポートしていないため、エクスポートされた Pivot Grid はテーブルとしてフォーマットされません。
エクスポートするコンテンツのカスタマイズ
上記の例では、Excel Exporter サービスで利用可能なデータをすべてエクスポートしました。行または列全体のエクスポートをしない方が良い場合があります。実装は、各列で発生される columnExporting
または各行で発生される rowExporting
イベントを処理し、イベント引数オブジェクトの cancel
プロパティを true
に設定して各イベントをキャンセルします。
以下の例は、ヘッダーが「Amount of Sale」の場合、エクスポートからすべての列を除外します。
this .excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs ) => {
if (args.header == 'Amount of Sale' ) {
args.cancel = true ;
}
});
this .excelExportService.export(this .pivotGrid, new IgxExcelExporterOptions('ExportedDataFile' ));
typescript
Pivot Grid コンポーネントのデータ エクスポートでは、行フィルタリングおよび列の非表示などの機能に応じて Pivot Grid で表示されるデータのみをエクスポートします。IgxExcelExporterOptions
オブジェクトのプロパティを設定し、エクスポーター サービスを構成してフィルターした行または非表示の列を含むことができます。
既知の制限
制限
説明
ワークシートの最大サイズ
Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。
セルのスタイル設定
IgxExcelExporterService は、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このような場合は、Excel Library を使用することをお勧めします。
API リファレンス
以下は、その他の Excel Exporter サービスの API です。
使用したその他のコンポーネント:
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。