如何使用react-virtuoso的TableVirtuoso组件打印完整表格？

要让TableVirtuoso在打印时渲染完整表格，核心是临时禁用虚拟化机制——因为组件默认的虚拟化只会渲染可见区域的行，打印时需要取消这个限制。以下是具体实现步骤：

实现方案 #

通过监听浏览器的打印事件，在打印前切换组件到非虚拟化模式，打印完成后恢复，同时调整容器高度让表格完整展开。

代码示例 #

import { useState, useEffect } from 'react';
import { TableVirtuoso } from 'react-virtuoso';

function PrintableTable() {
  const [isPrinting, setIsPrinting] = useState(false);

  useEffect(() => {
    // 监听打印前后事件
    const handleBeforePrint = () => setIsPrinting(true);
    const handleAfterPrint = () => setIsPrinting(false);

    window.addEventListener('beforeprint', handleBeforePrint);
    window.addEventListener('afterprint', handleAfterPrint);

    // 组件卸载时清理事件监听
    return () => {
      window.removeEventListener('beforeprint', handleBeforePrint);
      window.removeEventListener('afterprint', handleAfterPrint);
    };
  }, []);

  return (
    {/* 打印时让容器高度自适应，不再固定 */}
    <div style={{ height: isPrinting ? 'auto' : '500px' }}>
      <TableVirtuoso
        // 打印模式下禁用虚拟化
        disableVirtualization={isPrinting}
        data={yourDataArray} // 替换为你的数据源
        tableHeader={() => (
          <thead>
            <tr>
              <th>列1</th>
              <th>列2</th>
            </tr>
          </thead>
        )}
        itemContent={(_, item) => (
          <tr>
            <td>{item.column1}</td>
            <td>{item.column2}</td>
          </tr>
        )}
      />
    </div>
  );
}

关键说明 #

• disableVirtualization属性：设为true时，TableVirtuoso会渲染所有数据行，不再做虚拟化处理，确保打印时能获取完整表格内容。
• 打印事件监听：利用浏览器的beforeprint和afterprint事件自动切换模式，无需手动触发，不影响日常使用性能。
• 容器高度调整：虚拟化场景下通常需要固定容器高度，打印时改为auto，让表格根据内容自然展开。

额外优化（可选） #

如果需要表头在每页打印时重复显示，可以添加CSS媒体查询：

@media print {
  thead {
    display: table-header-group;
  }
}

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