Primeng p-table exportCSV() 函数不起作用？

Question

我正在使用新的 PrimengV7 p-table 我想导出表格，

所以我的代码是

<p-header>
        <div class="pull-right" *ngIf="collapsed">

            <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
        </div>
    </p-header>
<p-table class="ui-datatable" #dt [value]="rmanReconSosrcToBkingsRepList" selectionMode="single" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
    (onLazyLoad)="getRmanReconSosrcToBkingsRep($event)" [lazy]="true" [paginator]="true" [rows]="pageSize" [totalRecords]="totalElements"
                    [responsive]="true" scrollable="true" scrollHeight="400px">
                    <ng-template pTemplate="header">
                            <tr>
                                    <th style="width: 100px"></th>
                                    <th style="width: 100px">{{columns['so']}}</th>
                                    <th style="width: 100px">{{columns['sourceLineNumber']}}</th>
                                    <th style="width: 100px">{{columns['bookingEntityName']}}</th>
                              </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData let-rmanReconSosrcToBkingsRep>
                            <tr [pSelectableRow]="rowData">
                                    <td style="width: 100px">
                                        <span>  <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
                                        </span>
                                    </td>
                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.so}}">{{rmanReconSosrcToBkingsRep.so}}</td>
                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.sourceLineNumber}}">{{rmanReconSosrcToBkingsRep.sourceLineNumber}}</td>

                                    <td style="width: 100px" title="{{rmanReconSosrcToBkingsRep.bookingEntityName}}">{{rmanReconSosrcToBkingsRep.bookingEntityName}}</td>

                             </tr>
                    </ng-template>

即使我尝试将图标放在表格中，但它在显示错误的 cosole 中不起作用

试验 2：使用动态列

<p-table class="ui-datatable" #dt [value]="rmanReconSosrcToBkingsRepList" selectionMode="single" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
        (onLazyLoad)="getRmanReconSosrcToBkingsRep($event)" [lazy]="true" [paginator]="true" [rows]="pageSize" [totalRecords]="totalElements"
                        [responsive]="true" scrollable="true" scrollHeight="400px">
                        <ng-template pTemplate="header">
                                <tr>
                                        <th style="width: 100px"></th>
                                        <th *ngFor="let col of columnOptions">
                                                {{col.label}}
                                        </th>
                                     </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData let-rmanReconSosrcToBkingsRep>
                                <tr [pSelectableRow]="rowData">
                                        <td style="width: 100px">
                                            <span>  <a href="javascript:void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export"></a>
                                            </span>
                                        </td>

                                                <td *ngFor="let col of columnOptions">
                                                        {{rowData[col.value]}}
                                                    </td>

                                 </tr>
                        </ng-template>

即使它不起作用

请任何人帮助我

提前致谢。

Answer 1

如果你想导出表中的数据，你应该在prime ng中使用数据表的导出功能。 使用此功能绝对简单易行。 你应该遵循2个步骤。 首先，您应该在 p-table 标签上添加模板变量。如下：

 <p-table #dt [columns]="cols" [value]="cars" selectionMode="multiple" 
     [(selection)]="selectedCars">

在上面的行中， dt 是模板变量。

第二步是制作按钮并调用一个函数。 但请注意，您不得更改函数名称以触发导出函数：

   <button type="button" pButton icon="fa fa-file-o" iconPos="left" label="All Data" (click)="dt.exportCSV()" style="float:left"></button>

exportCSV() 是一个开始导出到 CSV 文件的函数。 但是您的代码是错误的，因为您在标签上的 p-table 之前使用了错误的函数。 该函数必须在 p-table 标签内。 不在此之外。

Answer 2

请将[columns]="cols"到<p-table>并尝试：

 <p-table #dt [columns]="cols" [value]="cars" selectionMode="multiple"[(selection)]="selectedCars" [exportFilename]="exportName">

Answer 3

在您的组件 .ts 文件中，您可以定义部分列信息，如下所示：

   // rest of column def in component html file for type, size, filters, etc..
   columns: any[] = [
        {field: 'selected'},
        {field: 'inventoryNum'},
        {field: 'serialNum'},
        {field: 'status'},
        {field: 'lastModifiedByUser'},
        {field: 'lastModifiedByDate'}
    ];

然后在您的 html 中，您可以添加一个按钮进行导出，例如：

    <button type="button" (click)="doDownloadToCsv()" pButton label="CSV" icon="pi pi-arrow-circle-down"></button>

然后在组件中，在回调函数中将表的列设置为上面的数组，例如：

   doDownloadToCsv() {
            let options = { selectionOnly: true };
            this.table.columns = this.columns;
            this.table.exportCSV(options);
        }

在这个函数中，我将 table.columns 设置为我的列：any[] 因为在 html 中而不是在其他地方定义它们是空的。 通过设置数组，它可以得到大小然后工作。 注意：我的解决方案只需要选定的行。

Answer 4

<p-table class="ui-datatable" #dt [value]="rmanReconSosrcToBkingsRepList" selectionMode="single" [(selection)]="selectedEmployees" (onRowSelect)="onRowSelect($event)"
[columns]="cols" (onLazyLoad)="getRmanReconSosrcToBkingsRep($event)" [lazy]="true" [paginator]="true" [rows]="pageSize" [totalRecords]="totalElements" [responsive]= "true" scrollable="true" scrollHeight="400px"> <th *ngFor="let col of columnOptions"> {{col.label}} <tr [pSelectableRow]="rowData"> <a href="javascript: void(0)" (click)="dt.exportCSV()" class="icon-export" title="Export">

                                            <td *ngFor="let col of columnOptions">
                                                    {{rowData[col.value]}}
                                                </td>

                             </tr>
                    </ng-template>