Ng-alainのstテーブルコンポーネントは、インタフェースが表示されない列をエクスポートすることを実現します.
3397 ワード
一般的な要件:stデータ(すべての列/一部の列)Excelのエクスポート
stコンポーネントはexport()関数を提供しています.テーブルのデータを直接Excelドキュメントにエクスポートするのに便利です.STColumnにもパラメータexportedがあります.booleanはエクスポートを許可するかどうかを制御します.これにより、インタフェースに表示されている全エクスポート、またはテーブルの一部の列がエクスポートされないか、他のエクスポートの効果を制御できます.コードの例を次に示します.
では、返されるデータ、例えば注釈情報は、情報が長すぎてstリストに表示しにくいが、エクスポート時にエクスポートしたい場合はどうすれば実現するのでしょうか.
XlsxServiceによるカスタムエクスポート
Ag-alain公式ドキュメント紹介:xlsx Excelの操作思想は、テーブルデータを1つの配列に格納し、列名がその配列の最初のオブジェクト要素であり、XlsxServiceのexport()メソッドを呼び出し、Excelドキュメントにエクスポートします.以下はコード例です.
stコンポーネントはexport()関数を提供しています.テーブルのデータを直接Excelドキュメントにエクスポートするのに便利です.STColumnにもパラメータexportedがあります.booleanはエクスポートを許可するかどうかを制御します.これにより、インタフェースに表示されている全エクスポート、またはテーブルの一部の列がエクスポートされないか、他のエクスポートの効果を制御できます.コードの例を次に示します.
//export(newData?: STData[] | true, opt?: STExportOptions)
@ViewChild('st', {static: false}) st: STComponent;
columns: STColumn[] = [
{
title: ' ',
buttons: [
{
text: ' ',
type: 'modal',
modal: {
component: testComponent
},
click: (record: STData, modal: any) => {
this.st.reload();
}
},
{
text: ' ',
type: 'modal',
click: (e: any) => {
this.modalSrv.confirm({
nzTitle: ' ',
nzContent: ' ?',
nzOkText: ' ',
nzOkType: 'danger',
nzOnOk: () => {
//
this.http.delete(`url?id=${e.id}`).subscribe((res: any) => {
if (res.rtnCode == '000000') {
this.msgSrv.success(" ");
this.st.reload();
}
})
},
nzCancelText: " ",
nzOnCancel: () => {
}
})
}
},
]
},
{title: ' ', index: 'title'},
{title: ' ', index: 'name'},
{title: ' ', index: 'mobile'},
{title: ' ', index: 'memo'},
];
// HTML export()
export(){
this.http.get(`url?page=1&size=${this.st.total}`,this.sf.value)
.subscribe((res: any) => {
if (res.rtnCode != '000000')
this.msgSrv.error(" ")
this.expConf = {
filename: 'st Excel .xlsx'
}
this.st.export(res.data.list, this.expConf); // st export
});
}
では、返されるデータ、例えば注釈情報は、情報が長すぎてstリストに表示しにくいが、エクスポート時にエクスポートしたい場合はどうすれば実現するのでしょうか.
XlsxServiceによるカスタムエクスポート
Ag-alain公式ドキュメント紹介:xlsx Excelの操作思想は、テーブルデータを1つの配列に格納し、列名がその配列の最初のオブジェクト要素であり、XlsxServiceのexport()メソッドを呼び出し、Excelドキュメントにエクスポートします.以下はコード例です.
//TypeScript :
export class ComponentsXlsxExportComponent {
constructor(private xlsx: XlsxService) {}
//
users: any[] = Array(100)
.fill({})
.map((_item: any, idx: number) => {
return {
id: idx + 1,
name: `name ${idx + 1}`,
age: Math.ceil(Math.random() * 10) + 20,
};
});
//
columns: STColumn[] = [
{ title: ' ', index: 'id', type: 'checkbox' },
{ title: ' ', index: 'name' },
{ title: ' ', index: 'age' },
];
download() {
//
const data = [this.columns.map(i => i.title)];
//
this.users.forEach(i =>
data.push(this.columns.map(c => i[c.index as string])),
);
// export() Excel , :
this.xlsx.export({
sheets: [
{
data: data,
name: 'sheet name',
},
],
});
}
}
//HTML :