primeng p-table exportCSV()函数不工作？

Question

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

所以我的代码是

<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中数据表的导出功能。使用这个特性是非常简单的。你应该遵循两个步骤。首先，您应该在下面的p表tag.as上添加模板变量：

 <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 on标签之前使用的函数是错误的。函数必须在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);
        }

在此函数中，我将列设置为my table.columns : any[]，因为它是null，因为它是在html中定义的，而不是在其他地方。通过设置数组，它可以获得大小，然后工作。注意:我的解决方案只接受选定的行。