在React中实现分块导出大量数据表格并压缩成图片的解决方案-牛翰网

需求分析

我们的目标是实现一个React组件，该组件能够：

处理大量数据的表格展示。
将表格数据分块导出为图片。
压缩导出的图片以减少文件大小。

实现步骤

1. 获取表格数据

首先，我们需要一个函数来获取React表格组件的数据源：

const getTableData = (tableElement) => {
  const children = React.Children.only(tableElement.props.children);
  return children.props.dataSource || [];
}

2. 创建带数据的表格实例

接下来，我们需要一个函数来创建一个新的表格实例，并更新其数据源：

const createTableWithData = (element, data) => {
  const tableInstance = React.Children.only(element.props.children);
  return React.cloneElement(tableInstance.props.children, {
    ...tableInstance.props.children.props,
    dataSource: data
  });
}

3. 分块导出表格

为了处理大量数据，我们将数据分块，并为每个数据块创建一个表格实例，然后导出为图片：

const exportTableInChunks = async (element) => {
  const zip = new JSZip();
  const tableElement = element.querySelector('.ant-table-wrapper');
  const allData = getTableData(tableElement);
  const chunkSize = 200;
  const chunks = [];

  for (let i = 0; i < allData.length; i += chunkSize) {
    chunks.push(allData.slice(i, i + chunkSize));
  }

  const exportContainer = document.createElement('div');
  document.body.appendChild(exportContainer);
  const root = createRoot(exportContainer);

  try {
    const batchSize = 3;
    for (let i = 0; i < chunks.length; i += batchSize) {
      const currentBatch = chunks.slice(i, i + batchSize);
      await Promise.all(
        currentBatch.map(async (chunk, batchIndex) => {
          const newTable = createTableWithData(tableElement, chunk);
          root.render(
            <ConfigProvider theme={React.Children.only(children).props.children.props.theme}>
              {newTable}
            </ConfigProvider>
          );

          await new Promise((resolve) => setTimeout(resolve, 2000));

          const png = await exportElementAsPng(exportContainer, `${title}_part${i + batchIndex + 1}`);
          if (png) {
            zip.file(
              `${title}_part${i + batchIndex + 1}.png`,
              png.split('base64,')[1],
              { base64: true }
            );
          }
        })
      );
    }

    const content = await zip.generateAsync({ type: 'blob' });
    saveAs(content, `${title}.zip`);
  } finally {
    root.unmount();
    document.body.removeChild(exportContainer);
    resetExportState();
  }
}

4. 导出操作的触发

最后，我们需要一个函数来触发导出操作，并处理错误：

const handleExportContent = async (element) => {
  if (!element) {
    console.warn('Export element not found');
    return;
  }

  try {
    const tableData = getTableData(element);
    if (tableData.length > 200) {
      await exportTableInChunks(element);
    } else {
      const res = await exportElementAsPng(element, title, 'single');
      if (!res) {
        throw new Error('Failed to export image');
      }
    }
    resetExportState();
  } catch (error) {
    console.error('Export failed:', error);
    message.error('导出失败，请重试');
  }
}

5.补充导出图片的工具方法

需要注意批量导出的需要转成base64然后压缩，单张的直接走单图片导出即可

import html2canvas from 'html2canvas'

export const exportElementAsPng = (
  element: HTMLElement,
  fileName: string = 'export',
  type?: string
) => {
  return new Promise((resolve, reject) => {
    // 添加最大尺寸限制
    const maxDimension = 16384 // 大多数浏览器的 Canvas 最大尺寸限制
    const elementRect = element.getBoundingClientRect()
    const scale = Math.min(
      2, // 原来的 2 倍缩放
      maxDimension / elementRect.width,
      maxDimension / elementRect.height
    )

    html2canvas(element, {
      backgroundColor: null,
      scale: scale,
      logging: false,
      useCORS: true, // 允许跨域图片
      allowTaint: true, // 允许跨域图片
      windowWidth: element.scrollWidth,
      windowHeight: element.scrollHeight
    })
      .then((canvas) => {
        // 创建下载链接
        if(type==='single'){
          const link = document.createElement('a')
          link.download = `${fileName}.png`
          link.href = canvas.toDataURL('image/png')
          link.click()
          resolve(true)
        }else{
          const base64String = canvas.toDataURL(type)
          resolve(base64String)
        }
      })
      .catch((error) => {
        reject(error)
      })
  })
}