通过 Syncfusion Essential JS 2 Grid for Angular 5 导出为单词

Question

'PDF export' 和 'Excel export' 功能列在 syncfusion-ej2 Grid (https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/( 的文档下。我已经在我的 Angular 应用程序中实现了它们。尽管如此，我还是找不到对"单词导出"的任何支持。我甚至没有通过谷歌搜索得到任何线索。

我想知道是否有办法在网格上实现"单词导出"功能？

我应该寻找哪些资源？或者必须对现有解决方案执行哪些更改，我在下面引用了这些更改？

[网页]

<div class="container-fluid">
<div class="row mt-2">
<div class="col-12">
<ejs-grid #schoolsGrid id="schoolsGrid" [dataSource]="schools" 
[allowSorting]="true" [allowGrouping]="true" [allowExcelExport]="true"
[toolbar]="toolbar" [allowPdfExport]="true" 
[allowSelection]="true" [selectionSettings]="schoolsSelectionOptions" (rowSelected)="schoolsRowSelected($event)"
[allowFiltering]="true" [filterSettings]="schoolsFilteringSettings"
[allowPaging]="true" [pageSettings]="schoolsPageSettings"
(toolbarClick)="schoolsToolbarClick($event)"
(actionComplete)="gridActionHandler($event)"
width="100%">
<e-columns>
<e-column field="schoolNumber" headerText="School Number" [allowGrouping]="false">
<ng-template #template let-data>
<a [routerLink]="[data.schoolNumber]" class="btn-link align-content-center">{{data.schoolNumber}}</a>
</ng-template>
</e-column>
<e-column field="campusNumber" headerText="Campus Number">
<ng-template #template let-data>
<a [routerLink]="[data.campusNumber]" class="btn-link align-content-center">{{data.campusNumber}}</a>
</ng-template>
</e-column>
<e-column field="fullSchoolName" headerText="School Name">
<ng-template #template let-data>
<a [routerLink]="[data.schoolNumber]" class="btn-link align-content-center">{{data.fullSchoolName}}</a>
</ng-template>
</e-column>
<e-column headerText="Campus Name"></e-column>
<e-column headerText="Company Name"></e-column>
<e-column headerText="Trading Name"></e-column>
<e-column field="abn" headerText="ABN"></e-column>
<e-column headerText="Start Date"></e-column>
<e-column headerText="End Date"></e-column>
<e-column headerText="Contract Value"></e-column>
<e-column headerText="Principal Name"></e-column>
<e-column headerText="LGA"></e-column>
<e-column headerText="Region"></e-column>
<e-column headerText="Phone Number"></e-column>
<e-column headerText="M/R"></e-column>
<e-column headerText="Transition Date"></e-column>
<e-column headerText="Last Update Date"></e-column>
<e-column headerText="Updated By"></e-column>
<e-column field="created" headerText="Created" format="yMd" type="datetime"></e-column>
</e-columns>
</ejs-grid>
</div>
</div>
</div>

[组件]

import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { SchoolsService, ISchool } from '../services/schools.service';
import { GridComponent, ToolbarItems, ToolbarService, ExcelExportService, SortEventArgs, PdfExportService, RowSelectEventArgs, SelectionSettingsModel, ToolbarItem } from '@syncfusion/ej2-ng-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { DataManager } from '@syncfusion/ej2-data';
@Component({
selector: 'app-school-list',
templateUrl: './school-list.component.html',
styleUrls: ['./school-list.component.less']
})
export class SchoolListComponent implements OnInit {
constructor(private router: Router, private route: ActivatedRoute, private schoolsService: SchoolsService) { }
public schools: ISchool[];
// Syncfusion GRID settings for the schools grid.
// Documentation: https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/getting-started.html
schoolsGridId = 'schoolsGrid';
@ViewChild('schoolsGrid')
public schoolsGrid: GridComponent;
public toolbar: ToolbarItems[];
//https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-filterSettings.html
public schoolsFilteringSettings = {};
//https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-selectionSettings.html
public schoolsSelectionOptions: SelectionSettingsModel;
schoolsToolbarClick(args: ClickEventArgs) {
//handles multiple grids on the page by prepending the Grid ID to the _eventname
//E.g.
//if (args.item.id == schoolsGrid_excelexport)....
if (args.item.id === (this.schoolsGridId + '_excelexport')) {
this.schoolsGrid.excelExport();
}
if (args.item.id === (this.schoolsGridId + '_pdfexport')) {
this.schoolsGrid.pdfExport();
}
}
schoolsRowSelected(args: RowSelectEventArgs) {
let selectedrowindex: number[] = this.schoolsGrid.getSelectedRowIndexes();  // Get the selected row indexes.
console.log(selectedrowindex);
let selectedRecords: ISchool[] = this.schoolsGrid.getSelectedRecords() as ISchool[];  // Get the selected records.
let selectedRecord = selectedRecords[0];
if (selectedRecord) {
//Do something
}
}
gridActionHandler(args: SortEventArgs) {
console.log(args.requestType + ' ' + args.type);
}
// https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-pageSettings.html
public schoolsPageSettings = {
currentPage: 1,
enableQueryString: true,
pageSizes: [10, 25, 50, 100],
pageSize: 10
};
ngOnInit() {
// Get Schools
this.schools = new Array<ISchool>();
this.toolbar = ['Print', 'Search', 'ExcelExport', 'PdfExport'];
this.schoolsService.getSchoolsTest(1000).subscribe((schools) => {
this.schools = schools;
});
}
}

[模块]

import { GridModule, PageService, SortService, GroupService, FreezeService, SelectionService, ExcelExportService, PdfExportService } from '@syncfusion/ej2-ng-grids';
import { ToolbarService } from '@syncfusion/ej2-ng-grids';
import { UploaderModule } from '@syncfusion/ej2-ng-inputs';
import { ToolbarModule } from '@syncfusion/ej2-ng-navigations';
import { DatePickerModule, DateTimePickerModule, TimePickerModule } from '@syncfusion/ej2-ng-calendars';    
import { SchoolsService } from './services/schools.service';
@NgModule({
imports: [
GridModule,
UploaderModule,
ToolbarModule,
DatePickerModule,
DateTimePickerModule,
TimePickerModule 
],  
providers: [
PageService, SortService, GroupService, FreezeService, SelectionService, ExcelExportService, PdfExportService,ToolbarService,
SchoolsService,
],
exports: [
]
})
export class AdminModule { }

Answer 1

目前，基本 JS2 网格组件不支持导出 Word 文档。根据您的要求，我们已将"网格的单词导出支持"视为一项功能，并为此记录了一份报告。该功能将在任何即将发布的版本中提供。

马杜 [同步]