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

【问题标题】：How to change export csv name in primeng while click on download?单击下载时如何更改primeng中的导出csv名称？
【发布时间】：2019-12-08 10:39:25
【问题描述】：

让我们考虑下面是 angular 的素数表：

我已使用 primengstrong> 表 library 列出记录并下载 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>

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

【问题讨论】：

标签： angular primeng-table

【解决方案1】：

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

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

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

工作Demo。

【讨论】：

@PramodKharade PS。我也浏览了代码。不过你也打败了我。 :)
谢谢，我们都是同一页。如果可能的话，然后推广这个问题，以便通过投票来帮助其他人

【解决方案2】：

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

我们可以为 .ts/component 文件中的变量或属性分配或声明任何名称，例如：dynamicdownloadName 或值。
在模板文件中插入名称：
将属性添加到 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>
``

【讨论】：