如何在 KendoReact (TypeScript) 中将网格导出为带有标题的 PDF？

Question

我有一个包含普通数据表的数据网格组件，我只想在导出的 PDF 的开头添加一个简单的标题，如下所示：

 <div>
    <h1>STUDENTS DEPARTMENT TABLE</h1>
    <h3>DEPARTMENT OF ENGINEERING, 2023</h3>
 </div>

我试图将其包装在 GridPDFExport 组件中，如下所示：

<div>
          {grid}
          <GridPDFExport 
            landscape={true}
            repeatHeaders={true} 
            paperSize='A4' 
            scale={0.5} 
            ref={pdfExport => gridPDFExport = pdfExport} 
            margin='1cm'
          >
            <div>
              <h1>STUDENTS DEPARTMENT TABLE</h1>
              <h3>DEPARTMENT OF ENGINEERING, 2023</h3>
            </div>
            {grid}
          </GridPDFExport>
</div>

这是我的导出方法：

const exportToPDF =  () => {
    setTimeout(() => {
      if (gridPDFExport) {
        gridPDFExport.save(gridData)
      }
    }, 250)
  }

但是导出的 PDF 中根本不显示标题，只显示网格。

我希望标题显示在 PDF 的顶部，但只显示了网格。我检查了文档，似乎没有任何效果。关于如何实现这个的任何想法？

Answer 1

您可以使用页面模板：https://www.telerik.com/kendo-react-ui/components/grid/pdf-export/page-template/

这里我定义了一个模板，它只会呈现第 1 页：

const PageTemplate = props => {
  if (props.pageNum === 1) {
    return <div style={{
      position: "absolute",
      top: "10px",
      left: "10px"
    }}>
      STUDENTS DEPARTMENT TABLE, DEPARTMENT OF ENGINEERING, 2023
    </div>;
  }
};

然后将其指定为GridPDFExport定义中的一个选项：

<GridPDFExport
  pageTemplate={PageTemplate}
>
 {grid}
</GridPDFExport>