从Angular数据表中导出筛选/搜索后的数据到Excel文件，使用导出过滤器。

Question

我正在尝试将angular数据表中的数据导出到Excel表格中。我已经成功地将整个Json对象导出到Excel表格中。

我想要的是，只将搜索/筛选后的数据导出到Excel中，如果搜索为空，则导出所有数据。

为了参考，让我展示一下我的代码

这是我的控制器

userService.getUserList( function(response) {
    if (response.status === 200) {
        vm.users = response.data.userDetails;
        return;
    }
    if (response.status === 400) {
        return toastr.error(response.data.exception);
    }

});


vm.exportData = function() {

    vm.listOfUsers = angular.copy(vm.users);

    vm.filteredData = _.map(vm.listOfUsers, function(data){
        var status = (data.isActive==true)?'Active':'In-Active';

        var users = {'Name': data.fullName, 'Email': data.email, 'Designation': data.designation, 'Company Name': data.companyName,'Status':status}
        return users;
    });

    alasql('SELECT * INTO XLSX("download.xlsx",{headers:true}) FROM ?', [vm.filteredData]);
}

这是我的HTML。

<div class="table-toolbar">
    <div class="row">
          <div class="col-md-6">
               <div class="btn-group">
                   <button id="sample_editable_1_new" class="btn sbold green" ng-click="vm.exportData()">Export As Excel</button>
               </div>
          </div>                                    
     </div>
</div>

<div class="dataTables_wrapper no-footer">
   <table class="table table-striped table-bordered table-hover dataTable" datatable="ng" id="sample_1">
         <thead>
            <tr>
                <th> Sl. No. </th>
                <th> Name </th>
                <th> Email </th>
                <th> Designation </th>                                                                                                 
                <th> Company Name </th>                                                 
                <th> Status </th>
            </tr>
         </thead>
         <tbody>
            <tr ng-repeat="user in vm.users">
                  <td> {{$index+1}} </td>
                  <td> {{user.fullName}} </td>
                 <td> {{user.email}} </td>
                   <td> {{user.designation}} </td>                                                                                                
                  <td> {{user.companyName}} </td>                                                 
                  <td>{{user.isActive === true? "Active" : "In-Active" }} 
                  </td> 
              </tr>
           </tbody>
  </table>

由于DataTables具有内置的搜索功能，当用户输入内容时，它会开始搜索。因此，当用户搜索并单击导出按钮时，我希望只传递与搜索查询相关的数据，以便只将这些数据导出到Excel中。

- Pavan S

Answer 1

我找到了一个解决方案，

与其打印数据，我打印了整个HTML表格，因此无论搜索或排序顺序如何，导出的HTML中都将有相同的数据。

唯一的变化是，我在HTML表格中添加了userDatatable类，并将alasql查询更改为以下内容。

 alasql('SELECT * INTO XLSX("download.xlsx",{headers:true}) \
                FROM HTML(".userDatatable")');

这解决了我的问题。希望能帮到其他人。

- Pavan S

Answer 2

按照以下步骤进行：

1. 首先将您的ID放入HTML表格标签中。
2. 然后将Excel服务注入构造函数并编写Excel函数。
3. 接着编写Excel服务。

HTML：

<table id="ExampleTable">
 .
 .
 .
</table>

COMPONENT.TS:

 constructor(private excel: ExcelService) {}

并且

 exportExcel(): void {
   this.excel.exportExcel('ExampleTable');
 }

ExcelService：

  public exportExcel(tableId: string, name?: string): void {
    const timeSpan = new Date().toISOString();
    const prefix = name || 'ExportResult';
    const fileName = `${prefix}-${timeSpan}`;
    const targetTableElm = document.getElementById(tableId);
    const wb = XLSX.utils.table_to_book(targetTableElm, { sheet: prefix } as 
 XLSX.Table2SheetOpts);
    XLSX.writeFile(wb, `${fileName}.xlsx`);
  }

- Sadegh Maasoomi