MUI X Data Grid打印导出自定义文件名无效，该如何解决？

问题原因 #

MUI X Data Grid 的 printOptions.fileName 参数无法控制打印保存对话框的文件名——浏览器的打印保存逻辑读取的是当前页面的 <title> 标签内容，而非组件配置的 fileName。CSV 导出是组件内部生成文件，所以配置有效，但打印走的是浏览器原生逻辑。

解决步骤 #

方法1：临时修改页面标题（简单快捷） #

在触发打印前修改页面标题为自定义文件名，打印完成后恢复原标题，通过自定义工具栏按钮实现：

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

// 自定义工具栏，替换默认导出按钮逻辑
const CustomGridToolbar = () => {
  const handlePrint = () => {
    const originalTitle = document.title;
    const exportFileName = generateExportFileName();
    
    // 修改页面标题，浏览器打印保存会读取这个值
    document.title = exportFileName;
    
    // 触发原生打印
    window.print();
    
    // 打印后恢复原标题
    setTimeout(() => {
      document.title = originalTitle;
    }, 100);
  };

  return (
    <GridToolbar>
      <GridToolbarExport />
      <button onClick={handlePrint} style={{ marginLeft: 8, padding: '6px 12px' }}>
        打印表格
      </button>
    </GridToolbar>
  );
};

// 在DataGrid中使用自定义工具栏
<DataGrid
  slots={{ toolbar: CustomGridToolbar }}
  slotProps={{ 
    toolbar: { 
      csvOptions: { fileName: generateExportFileName() }
    } 
  }}
  rows={uniqueProjectsDisplay}
  getRowId={row => row.projectId}
/>

方法2：自定义打印页面（灵活控制内容） #

如果需要调整打印样式或隐藏不必要的元素，可以生成独立的打印窗口，设置其标题后再触发打印：

import ReactDOM from 'react-dom';

const handlePrint = () => {
  const exportFileName = generateExportFileName();
  const printWindow = window.open('', '_blank');
  
  // 构建打印页面结构，引入必要样式保证表格显示正常
  printWindow.document.write(`
    <html>
      <head>
        <title>${exportFileName}</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
        <style>
          body { margin: 20px; font-family: Roboto, sans-serif; }
          .MuiDataGrid-root { width: 100%; }
        </style>
      </head>
      <body>
        <div id="print-container"></div>
      </body>
    </html>
  `);
  
  printWindow.document.close();
  
  // 将表格渲染到打印窗口，隐藏工具栏等不需要打印的元素
  ReactDOM.render(
    <DataGrid
      rows={uniqueProjectsDisplay}
      getRowId={row => row.projectId}
      slots={{ toolbar: null }}
    />,
    printWindow.document.getElementById('print-container')
  );
  
  // 等待渲染完成后触发打印
  setTimeout(() => {
    printWindow.print();
    printWindow.close();
  }, 500);
};

关键说明 #

• MUI X 官方的 printOptions.fileName 仅用于组件内部打印预览的标题，不影响浏览器保存对话框的文件名。
• 浏览器打印保存的文件名完全由打印页面的 <title> 标签内容决定，这是浏览器原生行为。

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