如何打印包含renderCell内图片的MUI X Data Grid

1. 开启浏览器打印图片选项 #

大部分浏览器默认会阻止打印背景图片，需要手动开启：

• Chrome：打印预览界面 → 更多设置 → 勾选「背景图形」
• Firefox：打印预览 → 页面设置 → 勾选「打印背景（颜色和图片）」

2. 添加打印专属CSS样式 #

MUI Data Grid的默认打印样式可能会隐藏图片或重置单元格布局，需要自定义@media print规则强制显示图片：

@media print {
  /* 确保单元格内的图片不被隐藏 */
  .MuiDataGrid-cell img {
    display: block !important;
    visibility: visible !important;
    height: 56px !important;
    width: 56px !important;
  }
  /* 避免打印时出现横向滚动，优化Grid布局 */
  .MuiDataGrid-root, .MuiDataGrid-main {
    overflow: visible !important;
  }
}

可以把这段样式加入全局CSS文件，或者用MUI的GlobalStyles组件注入：

import { GlobalStyles } from '@mui/material';

function YourComponent() {
  return (
    <>
      <GlobalStyles styles={{
        '@media print': {
          '.MuiDataGrid-cell img': {
            display: 'block !important',
            visibility: 'visible !important',
            height: '56px !important',
            width: '56px !important',
          },
          '.MuiDataGrid-root, .MuiDataGrid-main': {
            overflow: 'visible !important',
          },
        }
      }} />
      {/* 你的DataGrid组件 */}
    </>
  );
}

3. 确保图片路径可访问 #

如果使用相对路径加载图片，打印时可能因路径环境问题无法加载，建议换成绝对HTTP/HTTPS链接。同时可以提前预加载图片，避免打印时图片未加载完成：

import { useEffect } from 'react';

function YourComponent({ rows }) {
  useEffect(() => {
    rows.forEach(row => {
      const img = new Image();
      img.src = row.picture;
    });
  }, [rows]);

  // ... 其他代码
}

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