单击下载时如何更改 primeng 中的导出 csv 名称？

Question

让我们考虑下面是 angular 的质数 ng table:

我已经使用primengtablelibrary列出记录并下载csv。

<p-table #dt styleClass="table table-striped" [columns]="colsCSV" [value]="reviewSSRList" selectionMode="single"  [paginator]="true" [rows]="10">
      <ng-template pTemplate="caption">
        <div class="ui-helper-clearfix" style="text-align: left">
            <button type="button"  pButton icon="pi pi-file-o" iconPos="left" label="CSV" (click)="dt.exportCSV()" style="float:right;"></button>
        </div>
    </ng-template>  
      <ng-template pTemplate="header" let-columns>
            <!-- <tr>  
                <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                    {{col.header}} 
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </tr> -->
            <tr>
              <th style="text-align: center;" > Check & Delete
                  <!-- <p-sortIcon [field]="'towerId'"></p-sortIcon> -->
              </th>
              <th [pSortableColumn]="'towerId'">Tower ID
                  <p-sortIcon [field]="'towerId'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'towerName'">Tower Name
                  <p-sortIcon [field]="'towerName'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'exAxisTower'">Ex Axis Tower
                <p-sortIcon [field]="'exAxisTower'"></p-sortIcon>
            </th>
            <th [pSortableColumn]="'projectStatus'">Project Status
              <p-sortIcon [field]="'projectStatus'"></p-sortIcon>
            </th>
            <th [pSortableColumn]="'towerStatus'">Tower Status
             <p-sortIcon [field]="'towerStatus'"></p-sortIcon>
            </th>
            <th [pSortableColumn]="'towerType'">Tower Type
              <p-sortIcon [field]="'towerType'"></p-sortIcon>
            </th>
            <th [pSortableColumn]="'towerKind'">Tower Kind
              <p-sortIcon [field]="'towerKind'"></p-sortIcon>
            </th>
            <th [pSortableColumn]="'ownerShip'">Tower ownerShip Type
              <p-sortIcon [field]="'ownerShip'"></p-sortIcon>
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td  style="text-align: center;"><input type="checkbox" value="{{rowData.towerId}}" (change)="checkboxValSaveDraft($event)"></td>
                <td><a [routerLink]='"/saveDraftDetail/"+rowData.towerId'>{{rowData.towerId}}</a></td>
                <td>{{rowData.towerName}}</td>
                <td style="text-align: center;"><i class="fa fa-check remarkpositive" aria-hidden="true" *ngIf='rowData.exAxisTower'></i>
                  <i class="fa fa-window-close remarknegative" aria-hidden="true" *ngIf='!rowData.exAxisTower'></i>
                  </td>
                <td>{{rowData.projectStatus}}</td>
                <td>{{rowData.towerStatus}}</td>
                <td>{{rowData.towerType}}</td>
                <td>{{rowData.towerKind}}</td>
                <td> {{ rowData.ownerShip }}</td>
              </tr>
        </ng-template>
    </p-table>

当我们点击导出按钮时。它正在将 csv 下载为“download”名称。我们如何才能换成别的东西？

Answer 1

玩完 Primeng 文档后，我找到了将默认名称更改为任何名称的解决方案：

我们可以分配或声明任何名称 ex:dynamicdownloadName 或变量的值或 .ts/component 文件中的属性。
在模板文件中插入名称：
将属性添加到 p-table 标记为 exportFilename={{dynamicdownloadName}}

 <div class="row">
    <p-table #dt styleClass="table table-striped" exportFilename={{dynamicdownloadName}} [columns]="colsCSV" [value]="reviewSSRList" electionMode="single" [paginator]="true" [rows]="10">
       <!-- Assuming rest of all code is here -->
    </p-table>
</div>
``

Answer 2

exportFilename 值是 p-table 的输入属性，它被硬编码为 download。

要更改它，请将此属性与您的变量绑定。

<p-table [exportFilename]="variable_to_bind" ...

工作Demo。

单击下载时如何更改 primeng 中的导出 csv 名称？

How to change export csv name in primeng while click on download?

angular

primeng-table