Я использовал это представление сетки Syncfusion в моем приложении Angular (v6.8).
Все, чего я хочу добиться, это показать свое имя файла при загрузке содержимого сетки в виде таблицы Excel. В настоящее время. имя файла отображается как «Export.xlsx» после загрузки.
Я просмотрел эту документацию (это немного другая версия), и в ней четко объясняется, как установить имя файла. К сожалению, когда я пытаюсь повторить то же самое в версии, которую я сейчас использую ("@ 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 . Я сделал объект как «любой» (не указав его как тип объекта «ExcelExportProperties»), как вы сделали в своем примере кода. Тогда он жаловался как "ОШИБКА TypeError: Невозможно установить свойство 'fileName' из неопределенного"
Пожалуйста, сообщите мне.