如何在KendoReact（TypeScript）中导出带标题的Grid到PDF？

问题核心在于你调用 save(gridData) 时，GridPDFExport 会直接基于传入的数据生成表格，完全忽略组件内部的自定义标题和子元素内容。要让标题显示，调整两个关键地方即可：

1. 修改导出方法，移除save的参数 #

不要传入 gridData，直接调用无参的 save()，这样组件会以内部渲染的完整内容（标题+表格）生成PDF。

修改后的导出代码：

const exportToPDF = () => {
  if (gridPDFExport) {
    gridPDFExport.save(); // 去掉gridData参数
  }
}

2. 优化GridPDFExport内的标题样式（可选） #

你原有的组件结构没问题，可给标题加居中样式让PDF排版更规整：

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

原理说明 #

当你给 save() 传入数据时，GridPDFExport 会进入「数据导出模式」，直接用传入的数据生成表格，跳过渲染子组件；而无参调用时，组件会将内部所有渲染的DOM元素（包括标题和表格）一起转换成PDF，标题自然就能显示在顶部了。

内容的提问来源于stack exchange，提问作者Olabisi Olaoye