首页 > 解决方案 > Pdf 在 Syncfusion React 数据网格中不起作用

问题描述

当我尝试复制粘贴由syncfusion给出的样板代码时,Pdf组件不起作用。单击按钮时没有任何反应。我正在免费试用syncfusion ej2 react grid。我在哪里做错了?这是我的代码片段。

function Home() {
  let grid: Grid | null;
  const toolbarClick = (args: any): void => {
    if (grid) {
      if (args.item.id.includes('PdfExport')) {
        grid.pdfExport();
      }
    }
  }
    const pageSettings: PageSettingsModel = { pageSize: 100};
  const sortSettings: SortSettingsModel = {
    columns: [{ field: "id", direction: "Ascending" }]
  };

const [data, setData] = useState()
useEffect(()=>{
  fetch ("https://api.instantwebtools.net/v1/airlines")
  .then(res => res.json())
  .then(
    data => {
      setData(data);
    }
  )
}, []);


  return (
    <div>
      {" "}
     
      <GridComponent
     
        dataSource={data}
        ref={g => grid = g}
        allowPaging={true}
        pageSettings={pageSettings}
        allowSorting={true}
        sortSettings={sortSettings}
        toolbar={['pdfExport']}
        allowPdfExport={true}
        toolbarClick={toolbarClick}
      >
        <ColumnsDirective>
          <ColumnDirective field="id" width="100" textAlign="Right" />
          <ColumnDirective field="name" width="100" />
          <ColumnDirective field="country" width="100" textAlign="Right" />
          <ColumnDirective
            field="slogan"
            width="100"
            format="C2"
            textAlign="Right"
          />
          <ColumnDirective field="head_quaters" width="100" />
          <ColumnDirective field="website" width="100" />
          <ColumnDirective field="established" width="100" />
        </ColumnsDirective>
        <Inject services={[Page, Sort, Filter, Group,Toolbar,PdfExport]} />
      </GridComponent>
    </div>
  );
}
export default Home;

标签: reactjs

解决方案


推荐阅读