React+Tailwind中如何实现宽长表格的完整多页打印？

当前使用react-to-print打印长表格时，行可以正常分页，但宽表格的列会被页面边缘截断，无法实现横向分页。以下是针对性的解决方案：

1. 扩展打印样式规则 #

修改你的global.css文件，添加支持横向分页的打印工具类：

@layer utilities {
    @media print {
        .print\:page-inside-avoid {
            page-break-inside: avoid;
        }
        /* 让表格容器支持横向溢出分页 */
        .print\:table-container {
            width: 100%;
            overflow-x: auto;
            page-break-inside: avoid;
        }
        /* 强制表格宽度适配内容，允许横向跨页 */
        .print\:table {
            width: max-content;
            page-break-inside: avoid;
            page-break-after: auto;
        }
        /* 配置打印页边距与自适应尺寸 */
        @page {
            size: auto;
            margin: 1cm;
        }
        /* 确保样式在打印中正常渲染 */
        body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
    }
}

2. 给表格组件添加打印样式类 #

在你的表格外层容器和表格元素上，应用新增的打印工具类：

<div ref={componentRef} className="print:table-container">
  <table className="w-full print:table print:page-inside-avoid">
    {/* 表格表头与内容 */}
  </table>
</div>

3. 配置react-to-print的打印选项 #

通过pageStyle属性补充打印规则，确保分页逻辑生效：

<ReactToPrint                                
  trigger={() => (
      <button className="px-4 py-2 font-bold border border-gray-300 rounded-md shadow-sm hover:bg-gray-100">
          <CloudArrowDownIcon className="w-6 h-6" />
      </button>
  )}
  content={() => componentRef.current}
  pageStyle={() => `
    @page {
      size: auto;
      margin: 1cm;
    }
    .print-table-container {
      overflow-x: auto;
    }
    table {
      width: max-content;
      page-break-inside: avoid;
    }
  `}
/>

4. 额外兼容优化 #

• 若单元格内容过长，可添加工具类让内容换行，减少横向宽度压力：

  @layer utilities {
      @media print {
          .print\:cell-wrap {
              word-break: break-all;
              white-space: normal;
          }
      }
  }
  

  然后给表格单元格添加print:cell-wrap类。
• 部分浏览器需在打印预览中手动勾选「背景图形」，确保样式完整渲染。

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