使用@mui/x-data-grid时PDF/打印导出选项缺失仅显示CSV导出问题

问题原因 #

你遇到的问题是@mui/x-data-grid版本过低导致的，当前使用的5.0.0-beta.5属于早期测试版本，打印导出功能是在beta.7版本才正式加入到免费版默认GridToolbar中，beta.5版本的工具栏默认仅内置了CSV导出选项，所以看不到打印入口。

另外你项目中同时安装了已经废弃的旧版包@material-ui/data-grid和新版@mui/x-data-grid，也有可能引发组件功能异常的冲突问题。

解决方案 #

• 第一步：卸载旧版废弃依赖，避免包冲突，执行命令：

  npm uninstall @material-ui/data-grid
  

• 第二步：升级@mui/x-data-grid到正式稳定版本，执行命令：

  npm install @mui/x-data-grid@latest
  

升级完成后不需要修改现有业务代码，默认的GridToolbar就会自动显示CSV导出、打印两个选项。

补充说明 #

MUI X Data Grid免费版本身没有内置PDF导出功能，官方标注的免费导出能力仅包含CSV导出和打印，你需要导出PDF的话，可以直接调用系统打印功能后选择「另存为PDF」，也可以自己集成jsPDF等第三方库实现自定义PDF导出。

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