使用Angular将自定义文件名设置为Syncfusion网格视图的导出功能

Question

我在Angular（v6.8）应用程序中一直使用this Syncfusion网格视图。 我要做的就是在将网格内容下载为Excel工作表时显示一个自定义文件名。目前。下载后，文件名将显示为“ Export.xlsx”。

我浏览了this文档（版本略有不同），它清楚地说明了如何设置文件名。不幸的是，当我尝试在当前使用的版本中重复相同的内容（“ @ syncfusion / ej2-ng-grids”：“ ^ 16.1.48”）时，ExcelExportProperties无法将其识别为有效属性。

PS：我正在添加以下源代码供您参考

SpecialistAssessmentReportsComponent.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { DashboardService, IspecialistAssessmentReport } from '../services/dashboard.service';
import { GridComponent, ToolbarItems, PdfExportProperties, ExcelExportProperties, FilterService, ToolbarService, ExcelExportService, SortEventArgs, PdfExportService, RowSelectEventArgs, SelectionSettingsModel, ToolbarItem, GroupSettingsModel, GridLine } from '@syncfusion/ej2-ng-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { Router } from '@angular/router';
import { FrameworkConfigService } from '../../fw/services/framework-config.service';
import { AuthService } from '../services/auth.service';


@Component({
  selector: 'app-specialist-assessment-reports',
  templateUrl: './specialist-assessment-reports.component.html',
  styleUrls: ['./specialist-assessment-reports.component.scss']
})

export class SpecialistAssessmentReportsComponent implements OnInit {

  constructor(private router: Router,
    private authService: AuthService,
    private configService: FrameworkConfigService,
    private dashboardService: DashboardService) { }

  public specialistAssessmentReportData: Array<IspecialistAssessmentReport>;

  specialistAssessmentReportGridId = 'specialistAssessmentReportGrid';
  @ViewChild('specialistAssessmentReportGrid')
  public specialistAssessmentReportGrid: GridComponent;

  public toolbar: ToolbarItems[];
  public filterSettings: Object;

  pdfexportproperties: PdfExportProperties;
  excelexportproperties: ExcelExportProperties;

  public gridFilterSettings = {}
  gridLines: GridLine = "Both";
  public gridPageSettings = {
    currentPage: 1,
    enableQueryString: true,
    pageSizes: [10, 25, 50, 100, 250],
    pageSize: 50
  };

  gridToolbarClick(args: ClickEventArgs) {
    if (args.item.id === (this.specialistAssessmentReportGridId + '_excelexport')) {
      this.specialistAssessmentReportGrid.excelExport(this.excelexportproperties);
    }
    if (args.item.id === (this.specialistAssessmentReportGridId + '_pdfexport')) {
      this.specialistAssessmentReportGrid.pdfExport(this.pdfexportproperties);
    }
  }

  ngOnInit() {
    if (!this.specialistAssessmentReportAuthorized()) {
      this.redirectToHome();
      return;
    }

    this.toolbar = ["ExcelExport", "Search"];
    this.gridFilterSettings = { type: 'Excel' };
    this.dashboardService.getspecialistAssessmentReport().subscribe(data => {
      this.specialistAssessmentReportData = data;
    });
  }

  specialistAssessmentReportAuthorized(): boolean {
    let authorized: boolean = false;

    if (this.authService.isAdministrator() || this.authService.isVsbaRFE()) {
      authorized = true;
    }
    return authorized;
  }

  redirectToHome(): void {
    this.router.navigate(['home']);
  }    
}

SpecialistAssessmentReportsComponent.html

<div class="col-12" style="min-height:660px">
  <app-sectiontitle [heading]="'Specialist assessment activity report'"></app-sectiontitle>
  <p>Use the grid below to view the specialist assessment activity report. You can filter, sort, group, export and search using the grid below.</p>
  <div class="empty20"></div>
  <!-- Grid -->
  <div id="gridContainer">
    <ejs-grid #specialistAssessmentReportGrid id="specialistAssessmentReportGrid" [dataSource]="specialistAssessmentReportData"
              [allowSorting]="true" [allowGrouping]="true" [allowExcelExport]="true" [allowTextWrap]="true"
              [toolbar]="toolbar" [allowPdfExport]="true"
              [allowFiltering]="true" [filterSettings]="gridFilterSettings"
              [allowPaging]="true" [pageSettings]="gridPageSettings"
              [gridLines]="gridLines"
              (toolbarClick)="gridToolbarClick($event)">
      <e-columns>
        <e-column width="7%" field="schoolNumber" headerText="School number" [allowGrouping]="false" [allowFiltering]="true"></e-column>
        <e-column width="20%" field="schoolName" headerText="School name" [allowGrouping]="false" [allowFiltering]="true"></e-column>
        <e-column width="20%" field="activity" headerText="Activity" [allowGrouping]="true" [allowFiltering]="true"></e-column>
        <e-column width="25%" field="additionalInfo" headerText="Additional info" [allowGrouping]="true" [allowFiltering]="true"></e-column>
        <e-column width="10%" field="createdByName" headerText="Actioned by" [allowGrouping]="true" [allowFiltering]="true"></e-column>
        <e-column width="10%" field="createdOn" headerText="Activity date" [allowGrouping]="true" [allowFiltering]="true">
          <ng-template #template let-data>
            {{data.createdOn| date:'dd/MM/y HH:mm'}}
          </ng-template>
        </e-column>
        <e-column width="8%" field="dayDifference" headerText="Days b/w activities" [allowGrouping]="true" [allowFiltering]="true"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</div>
<div class="empty40"></div>

根据上面的快照，“ fileName”似乎不是 excelexportproperties 对象中的有效属性。正如您在示例代码中所做的那样，我将该对象设置为“ any”（未将其指定为“ ExcelExportProperties”类型的对象）。然后，它抱怨为“ ERROR TypeError：无法设置未定义的属性'fileName'”

请告诉我。

Answer 1

我们已在下面的stackblitz链接中准备了一个示例，但无法从头开始复制该问题。

示例：https://stackblitz.com/edit/angular-tlmwxa?file=package.json

因此，请提供以下详细信息以获得更好的帮助。

分享该问题的屏幕截图或视频演示。 如果您在控制台窗口中遇到任何脚本错误，请共享堆栈跟踪详细信息。 分享完整的网格代码示例。 如果可能，请尝试在随附的示例中重现该问题。

关于， Thavasian和S.