5

让我们考虑下面是angular的prime ng表：

我使用primeng表库列出记录并下载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。我们怎样才能换成别的东西？

4

2 回答 2

3

exportFilenamevalue 是p-table硬编码为的输入属性download。

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

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

工作演示。

于 2019-12-08T11:11:04.887 回答
2

在使用Primeng Document 之后，我找到了将默认名称更改为任何内容的解决方案：

  1. 我们可以为.ts/component 文件中的变量或属性分配或声明任何名称，例如： dynamicdownloadName或值。

  2. 在模板文件中插入名称：

  3. 将属性添加到 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>
``
于 2019-12-08T11:08:27.097 回答