快捷導(dǎo)航

在React中實現(xiàn)分塊導(dǎo)出大量數(shù)據(jù)表格并壓縮成圖片的解決方案

更新時間：2024年12月19日 10:48:06 作者：snakeshe1010

在現(xiàn)代Web開發(fā)中,處理和展示大量數(shù)據(jù)是一個常見的挑戰(zhàn),特別是在使用React框架時,我們經(jīng)常需要將這些數(shù)據(jù)以表格的形式展示,并提供導(dǎo)出功能,本文將介紹如何在React中實現(xiàn)一個高效、分塊導(dǎo)出大量數(shù)據(jù)表格,并將其壓縮為圖片的解決方案,需要的朋友可以參考下

需求分析

我們的目標是實現(xiàn)一個React組件，該組件能夠：

處理大量數(shù)據(jù)的表格展示。
將表格數(shù)據(jù)分塊導(dǎo)出為圖片。
壓縮導(dǎo)出的圖片以減少文件大小。

實現(xiàn)步驟

1. 獲取表格數(shù)據(jù)

首先，我們需要一個函數(shù)來獲取React表格組件的數(shù)據(jù)源：

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

2. 創(chuàng)建帶數(shù)據(jù)的表格實例

接下來，我們需要一個函數(shù)來創(chuàng)建一個新的表格實例，并更新其數(shù)據(jù)源：

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. 分塊導(dǎo)出表格

為了處理大量數(shù)據(jù)，我們將數(shù)據(jù)分塊，并為每個數(shù)據(jù)塊創(chuàng)建一個表格實例，然后導(dǎo)出為圖片：

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. 導(dǎo)出操作的觸發(fā)

最后，我們需要一個函數(shù)來觸發(fā)導(dǎo)出操作，并處理錯誤：

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('導(dǎo)出失敗，請重試');
  }
}

5.補充導(dǎo)出圖片的工具方法

需要注意批量導(dǎo)出的需要轉(zhuǎn)成base64然后壓縮，單張的直接走單圖片導(dǎo)出即可

import html2canvas from 'html2canvas'

export const exportElementAsPng = (
  element: HTMLElement,
  fileName: string = 'export',
  type?: string
) => {
  return new Promise((resolve, reject) => {
    // 添加最大尺寸限制
    const maxDimension = 16384 // 大多數(shù)瀏覽器的 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) => {
        // 創(chuàng)建下載鏈接
        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)
      })
  })
}

結(jié)語

通過上述步驟，我們實現(xiàn)了一個能夠處理React中大量數(shù)據(jù)表格的分塊導(dǎo)出與圖片壓縮的功能。這種方法不僅提高了性能，還優(yōu)化了用戶體驗，使得大量數(shù)據(jù)的導(dǎo)出變得更加高效和實用。

到此這篇關(guān)于在React中實現(xiàn)分塊導(dǎo)出大量數(shù)據(jù)表格并壓縮成圖片的解決方案的文章就介紹到這了,更多相關(guān)React導(dǎo)出數(shù)據(jù)表格并壓縮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: