Angular 使用ngx导出导出所有数据，如角度

我使用“ngx导出为”包导出excel中的mat表数据。我有多个表以及组件中的mat paginator。它导出到excel，但它导出显示的记录。

如图所示，当我点击“Excel”按钮时，它只导出5条记录，但表中总共有59条记录。我想导出表的所有数据

我参考了他的建议，但未能实现我的目标

我已经为此编写了一些代码，如下所述： 1） 在App.module.ts中添加程序包

import { MaterialModule } from './material/material.module';
import { ExportAsModule } from 'ngx-export-as';
@NgModule({
    imports: [MaterialModule,ExportAsModule]
});

2） gl.Component.html添加按钮和垫表

<div class="row" id="mytable" [style.display]="accordionVisible ?'inherit':'none'">
<button mat-raised-button (click)="exportAs('xlsx')">Excel</button>

<div class="col-lg-12 col-md-12 col-sm-12" *ngFor="let item of accordionAccounts;" >  

  <div [style.display]="accordionVisible && IsDataAvailable(item.DataSource) ?'inherit':'none'">  <!--*ngIf="accordionVisible && item.DataSource.data.length>0"-->
    <br />
    <mat-expansion-panel [expanded]="true">
      <mat-expansion-panel-header>
        <mat-panel-title>{{item["AccountName"]}}</mat-panel-title>           
      </mat-expansion-panel-header>  

      <div > 
        <mat-table [dataSource]="item.DataSource">
          <ng-container matColumnDef="RowNumber">
            <mat-header-cell *matHeaderCellDef class="RowNumberColumn" >No.</mat-header-cell>
            <mat-cell data-label="RowNumber" *matCellDef="let element" class="RowNumberColumn"> {{element.RowNumber}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="Date">
            <mat-header-cell *matHeaderCellDef class="DateColumn">Date</mat-header-cell>
            <mat-cell data-label="Date" *matCellDef="let element" class="DateColumn"> {{element.Date}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="LeaseName">
            <mat-header-cell *matHeaderCellDef class="LeaseColumn">Lease Name</mat-header-cell>
            <mat-cell data-label="LeaseName" *matCellDef="let element" class="LeaseColumn"> {{element.LeaseName}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="Account">
            <mat-header-cell *matHeaderCellDef class="AccountColumn">Account</mat-header-cell>
            <mat-cell data-label="Account" *matCellDef="let element" class="AccountColumn"> {{element.AccountName}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="Description">
            <mat-header-cell *matHeaderCellDef class="CenterAlign AccountColumn">Description</mat-header-cell>
            <mat-cell data-label="Description" class="CenterAlign AccountColumn" *matCellDef="let element"> {{element.Description}}
            </mat-cell>
          </ng-container>

          <ng-container matColumnDef="Debit">
            <mat-header-cell *matHeaderCellDef class="Digit-Cell DebitColumn">Debit</mat-header-cell>
            <mat-cell data-label="Debit" class="Digit-Cell DebitColumn" *matCellDef="let element"> {{element.Debit | number : this.setFormatNumber(this.fraction)}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="Credit">
            <mat-header-cell *matHeaderCellDef class="Digit-Cell CreditColumn">Credit</mat-header-cell>
            <mat-cell data-label="Credit" class="Digit-Cell CreditColumn" *matCellDef="let element"> {{element.Credit | number : this.setFormatNumber(this.fraction)}} </mat-cell>
          </ng-container>

          <ng-container matColumnDef="Balance">
            <mat-header-cell *matHeaderCellDef class="Digit-Cell BalanceColumn">Balance</mat-header-cell>
            <mat-cell data-label="Balance" class="Digit-Cell BalanceColumn" *matCellDef="let element"> {{element.Balance | number : this.setFormatNumber(this.fraction)}}
            </mat-cell>
          </ng-container>              
          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </mat-table>
        <div [style.display]="accordionVisible && IsDataAvailable(item.DataSource) ?'inherit':'none'" *ngIf="AllowPaggination"> <!--*ngIf="item.DataSource.data.length===0"-->
            <mat-paginator  [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons [pageSize]="5" style="justify-content: start"></mat-paginator>
        </div>  
      </div>

    </mat-expansion-panel>

  </div>
</div>

擅长


{{item[“AccountName”]}
不
{{element.RowNumber}}
日期
{{element.Date}
租赁名称
{{element.LeaseName}}
账户
{{element.AccountName}
描述
{{element.Description}
借记
{{element.Debit | number:this.setFormatNumber（this.fraction）}
信用
{{element.Credit | number:this.setFormatNumber（this.fraction）}
平衡
{{element.Balance | number:this.setFormatNumber（this.fraction）}

3） gl.Component.ts

import { MatDialogRef, MAT_DIALOG_DATA,MatPaginator,MatTableDataSource } from "@angular/material";
import { ExportAsService, ExportAsConfig, SupportedExtensions } from 'ngx-export-as';

export class GLComponent implements OnInit {
 config: ExportAsConfig = {
 type: 'xlsx',
 elementId: 'mytable',
 options: {
   jsPDF: {
     orientation: 'landscape'
   },
   pdfCallbackFn: this.pdfCallbackFn // to add header and footer
 }
};

@ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();

exportAs(type: SupportedExtensions, opt?: string) {

 let that=this;

 this.config.type = type;
 if (opt) {
   this.config.options.jsPDF.orientation = opt;
 }
 this.exportAsService.save(this.config, 'myFile').subscribe(() => {

 });
}

pdfCallbackFn (pdf: any) {
// example to add page number as footer to every page of pdf
const noOfPages = pdf.internal.getNumberOfPages();
for (let i = 1; i <= noOfPages; i++) {
  pdf.setPage(i);
  pdf.text('Page ' + i + ' of ' + noOfPages, pdf.internal.pageSize.getWidth() - 100, pdf.internal.pageSize.getHeight() - 30);
}

从“@angular/material”导入{MatDialogRef，MAT_DIALOG_数据，MatPaginator，MatTableDataSource}；
从“ngx导出为”导入{ExportAsService，ExportAsConfig，SupportedExtensions}；
导出类GLComponent实现OnInit{
配置：ExportAsConfig={
类型：“xlsx”，
elementId:'mytable'，
选项：{
jsPDF:{
定位：“景观”
},
pdfCallbackFn:this.pdfCallbackFn//添加页眉和页脚
}
};
@ViewChildren（MatPaginator）paginator=new QueryList（）；
exportAs（类型：SupportedExtensions，选项？：字符串）{
让那=这；
this.config.type=type；
如果（选择）{
this.config.options.jsPDF.orientation=opt；
}
this.exportAsService.save（this.config，“myFile”）.subscribe（（）=>{
});
}
pdfCallbackFn（pdf:any）{
//将页码作为页脚添加到pdf的每一页的示例
const noofpage=pdf.internal.getNumberOfPages（）；
对于（设i=1；i您需要创建一个虚拟html表或一个弹出窗口，在单击导出按钮后打开。然后点击获取所有59条记录的API并将其呈现在新表（或Mat表）中然后在ngx导出中给出它的表id作为。该库可以在html元素中获取当前数据的快照，该元素的id是给定的，因此请确保html元素始终将所有数据放在适当的位置