MUI X Data Grid Excel导出问题问询：分页、图片格式与资源优化

1. 服务器端分页全量导出 #

MUI X Data Grid默认仅导出当前页数据，针对服务器端分页场景，推荐两种全量导出方案：

• 后端提供全量数据接口：最可靠的方式是让后端单独暴露返回所有数据的接口，前端导出时请求该接口获取全量数据，再调用Data Grid的导出API处理。
  示例代码：

  import { useGridApiRef } from '@mui/x-data-grid-premium';
  
  const apiRef = useGridApiRef();
  const [originalPageData, setOriginalPageData] = useState([]);
  
  const handleFullExport = async () => {
    // 请求后端全量数据接口
    const allData = await fetch('/api/full-dataset').then(res => res.json());
    // 临时替换表格数据源为全量数据
    apiRef.current.setRows(allData);
    // 执行导出
    apiRef.current.exportDataAsExcel();
    // 恢复原分页数据
    apiRef.current.setRows(originalPageData);
  };
  

• 前端分批请求合并数据：若后端无法提供全量接口，可前端循环请求所有分页数据，合并后再导出。注意控制请求频率，避免触发后端限流。
  示例思路：

  const fetchAllPages = async () => {
    const totalPages = apiRef.current.getTotalPages();
    let allData = [];
    for (let page = 1; page <= totalPages; page++) {
      const pageData = await fetch(`/api/data?page=${page}`).then(res => res.json());
      allData = [...allData, ...pageData.rows];
    }
    return allData;
  };
  
  const handleFullExport = async () => {
    const allData = await fetchAllPages();
    apiRef.current.setRows(allData);
    apiRef.current.exportDataAsExcel();
    apiRef.current.setRows(originalPageData);
  };
  

2. 导出图片到Excel #

MUI X默认不支持直接导出图片，但可通过自定义导出逻辑实现，核心是将图片转为Base64格式后插入Excel单元格：

• 先通过工具函数将图片URL转为Base64，再借助xlsx库（Data Grid导出底层依赖该库）将图片插入对应单元格。
  示例代码：

  import XLSX from 'xlsx';
  
  // 图片转Base64工具函数
  const imageToBase64 = async (url) => {
    const response = await fetch(url);
    const blob = await response.blob();
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result);
      reader.readAsDataURL(blob);
    });
  };
  
  const handleExportWithImages = async () => {
    const allData = await fetchAllPages(); // 获取包含图片URL的全量数据
    const workbook = XLSX.utils.book_new();
    // 先创建基础数据工作表
    const worksheet = XLSX.utils.json_to_sheet(allData.map(row => ({
      ...row,
      avatar: '' // 占位，后续替换为图片
    })));
  
    // 逐个插入图片到对应单元格
    for (let i = 0; i < allData.length; i++) {
      const base64 = await imageToBase64(allData[i].avatar);
      const imageOpts = {
        name: 'avatar',
        data: base64.split(',')[1],
        type: 'base64',
        position: { t: i + 2, l: 3 } // 对应Excel单元格位置（t=行，l=列）
      };
      XLSX.utils.sheet_add_image(worksheet, imageOpts);
    }
  
    XLSX.utils.book_append_sheet(workbook, worksheet, '带图片数据');
    XLSX.writeFile(workbook, '数据导出.xlsx');
  };
  

3. 大文件导出资源优化 #

针对大文件导出的内存和性能问题，可采用以下优化策略：

• 后端生成Excel文件：将数据处理、文件生成逻辑移至后端，前端仅请求下载链接，完全规避前端内存占用，这是大文件导出的最优方案。
• 前端分块流式处理：使用xlsx的流式API，分批次将数据写入Excel，减少单批次内存占用。示例思路：

  const streamExport = async () => {
    const totalPages = apiRef.current.getTotalPages();
    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet([]);
    XLSX.utils.book_append_sheet(workbook, worksheet, '数据');
  
    for (let page = 1; page <= totalPages; page++) {
      const pageData = await fetch(`/api/data?page=${page}`).then(res => res.json());
      // 分批次追加数据到工作表，跳过重复表头
      const newRows = XLSX.utils.json_to_sheet(pageData.rows, { skipHeader: page > 1 });
      XLSX.utils.sheet_add_aoa(worksheet, XLSX.utils.sheet_to_json(newRows, { header: 1 }), { origin: -1 });
    }
  
    XLSX.writeFile(workbook, '大文件导出.xlsx');
  };
  

• 精简导出内容：导出时过滤不必要的列，关闭非必要的单元格样式、合并单元格等格式，降低文件大小和处理耗时。
• 及时释放资源：导出完成后，清空临时存储的全量数据，避免浏览器内存泄漏。

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