如何在syncfusion react grid中实现pdfExport作为一个功能组件?

Question

一直在尝试使用ej2-syncfusionGridComponent的pdfExport()功能，但似乎无法使其作为功能组件工作。

注意:我没有使用类组件。浏览器控制台报告Uncaught TypeError: grid.pdfExport is not a function。我可能错过了一些愚蠢的东西。本文档中引用的代码的功能组件实现是什么?

Answer 1

App组件

import {
ColumnDirective,
ColumnsDirective,
Filter,
GridComponent,
Group
} from "@syncfusion/ej2-react-grids";
import {
Inject,
Page,
PageSettingsModel,
Sort,
SortSettingsModel
} from "@syncfusion/ej2-react-grids";
import * as React from "react";
import { data } from "./datasource";
import Home from "./Home";
export default class App extends React.Component<{}, {}> {
public pageSettings: PageSettingsModel = { pageSize: 6 };
public sortSettings: SortSettingsModel = {
columns: [{ field: "EmployeeID", direction: "Ascending" }]
};
public render() {
return (
<div>
{" "}
<Home /> <br /> <br /> <p>Grid-2 using Class Components</p>
<GridComponent
dataSource={data}
allowPaging={true}
pageSettings={this.pageSettings}
allowSorting={true}
sortSettings={this.sortSettings}
>
<ColumnsDirective>
<ColumnDirective field="OrderID" width="100" textAlign="Right" />
<ColumnDirective field="CustomerID" width="100" />
<ColumnDirective field="EmployeeID" width="100" textAlign="Right" />
<ColumnDirective
field="Freight"
width="100"
format="C2"
textAlign="Right"
/>
<ColumnDirective field="ShipCountry" width="100" />
</ColumnsDirective>
<Inject services={[Page, Sort, Filter, Group]} />
</GridComponent>{" "}
</div>
);
}
}

<<p>国内组件/strong>

import {
ColumnDirective,
ColumnsDirective,
GridComponent
} from "@syncfusion/ej2-react-grids";
import {
Filter,
Group,
Inject,
Page,
PageSettingsModel,
Sort,
SortSettingsModel
} from "@syncfusion/ej2-react-grids";
import * as React from "react";
import { sdata } from "./datasource";
function Home() {
const pageSettings: PageSettingsModel = { pageSize: 6 };
const sortSettings: SortSettingsModel = {
columns: [{ field: "EmployeeID", direction: "Ascending" }]
};
return (
<div>
{" "}
<p>Grid-1 using Functional Components</p>
<GridComponent
dataSource={sdata}
allowPaging={true}
pageSettings={pageSettings}
allowSorting={true}
sortSettings={sortSettings}
>
<ColumnsDirective>
<ColumnDirective field="OrderID" width="100" textAlign="Right" />
<ColumnDirective field="CustomerID" width="100" />
<ColumnDirective field="EmployeeID" width="100" textAlign="Right" />
<ColumnDirective
field="Freight"
width="100"
format="C2"
textAlign="Right"
/>
<ColumnDirective field="ShipCountry" width="100" />
</ColumnsDirective>
<Inject services={[Page, Sort, Filter, Group]} />
</GridComponent>
</div>
);
}
export default Home;

Answer 2

这样做的方法是引用Grid，然后在工具栏click触发的回调中调用pdfExport方法。

const Component = () => {
let grid;
const toolbarClick = (args) => {
if (grid) {
if (args.item.id.includes('pdfexport')) {
grid.pdfExport();
}
}
}
return (
<GridComponent
ref={g => grid = g}
dataSource={data}
allowPdfExport
toolbar = {['PdfExport']}
toolbarClick={toolbarClick}
>
</GridComponent>
)
}