博客

一般需求：st数据（所有列/部分列）导出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 操作


思想就是：将表格数据都存储在一个数组中，列名是该数组的第一个对象元素，再调用

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代码：
<button nz-button (click)="download()">Export</button>
<st [data]="users" [ps]="3" [columns]="columns" class="mt-sm"></st>