如何在@mui/x-data-grid导出PDF时隐藏工具栏和页脚？

你需要自定义网格工具栏，把配置好printOptions的GridToolbarExport组件整合进去，替换默认的导出按钮，具体步骤如下：

1. 确认导入所需组件 #

确保已从@mui/x-data-grid导入相关组件：

import { DataGrid, GridToolbar, GridToolbarExport } from '@mui/x-data-grid';

2. 创建自定义工具栏组件 #

创建包含配置好导出选项的自定义工具栏，保留原工具栏的其他默认功能：

const CustomGridToolbar = () => (
  <GridToolbar>
    <GridToolbarExport
      printOptions={{
        hideFooter: true,
        hideToolbar: true,
      }}
    />
    {/* 这里会自动保留GridToolbar自带的分页、筛选等控件 */}
  </GridToolbar>
);

3. 在DataGrid中替换为自定义工具栏 #

将原DataGrid的components.Toolbar替换为刚才创建的自定义组件：

<DataGrid
  {...data}
  autoHeight
  components={{ Toolbar: CustomGridToolbar }} // 使用自定义工具栏
  pageSize={pageSize}
  onPageSizeChange={(_size) => setPageSize(_size)}
  rowsPerPageOptions={[10, 20, 30]}
  checkboxSelection
  selectionModel={selectionModel}
  disableSelectionOnClick
  onSelectionModelChange={(newSelectionModel) => {
    setSelectionModel(newSelectionModel);
  }}
/>

失效原因说明 #

你之前单独编写的<GridToolbarExport>没有替换默认工具栏里的导出按钮，默认GridToolbar自带的导出组件未配置printOptions，因此无法生效。通过自定义工具栏替换默认导出控件后，配置的参数才能作用于导出功能。

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