各位同学，大家好！欢迎来到今天的“React 打印艺术与样式分页逻辑”深度研讨会。
我是你们的讲师。今天我们不聊 Redux，不聊 React Router，也不聊那些让你头秃的 TypeScript 类型定义。我们聊点更“硬核”的——打印。
在很多资深工程师的职业生涯中，打印功能是“甜蜜的负担”。你以为打印就是点个window.print()？天真！在 React 世界里，打印是一场与浏览器渲染引擎的博弈，是一场与 CSS 分页规则的捉迷藏，更是一场为了不让老板看到表格被切断而与墨水做斗争的战争。
今天，我们就来把这坨乱麻理清楚。我们要解决的核心问题是：如何在 React 中优雅地处理不同媒体查询下的打印预览，并精准控制 CSS 的分页逻辑？
准备好了吗？我们要开始上课了。
第一阶段：原生 CSS 的黑暗森林
首先，我们要明白一个残酷的真相：Web 是为屏幕设计的，不是为纸张设计的。浏览器在设计之初，根本没想过你要把它变成一份 30 页的 PDF 报告。
当你调用window.print()时，浏览器会生成一个临时的“打印视图”。在这个视图中，所有的 CSS 都会重置，所有的!important都会生效（有时候是好事，有时候是坏事），最关键的是，它会根据 CSS 的分页属性来决定内容去哪里。
1. 基础的媒体查询魔法
在 React 中，我们最常用的手段就是@media print。这就像是给打印机发的一条专属指令。
想象一下，你的应用有一个导航栏、一个侧边栏，还有一堆花花绿绿的按钮。打印的时候，你绝对不想把这些东西印在发票上，对吧？你想的是“白纸黑字，干净利落”。
代码示例 1：基础打印样式重置
// PrintStyles.css @media print { /* 1. 隐藏所有不必要的东西 */ .no-print, nav, .sidebar, .action-buttons { display: none !important; } /* 2. 强制背景色打印（默认浏览器可能不打印背景色，除非勾选设置） */ body { background: white !important; color: black !important; } /* 3. 隐藏滚动条 */ ::-webkit-scrollbar { display: none; } /* 4. 强制分页符（后面细讲） */ .page-break { page-break-after: always; } }然后在你的 React 组件中引入：
import React from 'react'; import './PrintStyles.css'; const MyComponent = () => { return ( <div className="main-container"> <nav className="no-print">这是导航栏，打印时消失</nav> <div className="content-area"> <h1>我的报告</h1> <p>这是正文内容...</p> <div className="page-break"></div> <h2>第二部分</h2> </div> </div> ); };讲师点评：这是第一步，也是最基础的一步。但是，同学，你遇到过这种情况吗：你明明写了display: none，但打印预览里它还在那儿晃悠？别慌，这是因为浏览器在计算布局时，有些元素被“撑开”了。我们需要更激进的手段。
第二阶段：React 的生命周期与打印控制
仅仅靠 CSS 是不够的。React 的强大在于它的状态管理和副作用。我们需要在打印发生的前后，动态地改变 DOM 的结构，或者控制类的添加与移除。
1. 状态驱动打印视图
通常，我们不会真的去打印整个页面（那是灾难）。我们会写一个专门的“打印视图组件”，或者把当前数据转换成打印格式。这里，我们用 React 的useState和useEffect来控制。
场景：当用户点击“打印”按钮时，我们希望：
- 隐藏主界面。
- 显示一个全屏的打印容器。
- 触发打印。
- 打印结束后，恢复原状。
代码示例 2：React 控制打印流程
import React, { useState, useEffect, useRef } from 'react'; const PrintDemo = () => { const [isPrinting, setIsPrinting] = useState(false); const printContentRef = useRef(null); // 当 isPrinting 为 true 时，触发打印 useEffect(() => { if (isPrinting) { window.print(); // 等待打印对话框关闭（这是个粗略的估计，实际开发中可能需要更复杂的逻辑） setTimeout(() => setIsPrinting(false), 1000); } }, [isPrinting]); const handlePrintClick = () => { setIsPrinting(true); }; return ( <div className="app"> {/* 主界面 */} <div className="main-view"> <button onClick={handlePrintClick} className="no-print"> 🖨️ 打印报告 </button> <h1>主界面内容</h1> <p>点击上方按钮开始打印...</p> </div> {/* 打印视图容器 */} {isPrinting && ( <div className="print-container"> <div ref={printContentRef} className="print-content"> <header> <h1>财务报表</h1> <p>打印日期：{new Date().toLocaleDateString()}</p> </header> <main> <p>这里是打印的内容...</p> </main> <footer> <p>页脚信息</p> </footer> </div> </div> )} </div> ); };讲师点评：这种方法虽然简单，但有个坑。如果打印对话框被用户取消了，setTimeout里的代码依然会执行，导致isPrinting变回false，但页面状态可能还没恢复。这就导致了 UI 的闪烁或错乱。我们需要一个更严谨的方案。
第三阶段：样式隔离与 Tailwind 的“黑暗面”
在 React 项目中，我们经常用 Tailwind CSS。Tailwind 很方便，但在打印时，它的响应式前缀（如md:）会失效，因为打印时没有“断点”，只有“纸张”。
1. 处理 Tailwind 的打印类
Tailwind 有一个专门的打印插件，或者我们可以使用@media print来覆盖 Tailwind 的默认类。
代码示例 3：Tailwind 打印配置
// tailwind.config.js module.exports = { theme: { extend: { // 可以在这里定义打印专用的颜色 colors: { print: { black: '#000000', gray: '#333333', } } } }, plugins: [ // 确保你安装了 @tailwindcss/plugin-print require('@tailwindcss/plugin-print'), ], };然后在组件里：
// 在打印视图中 <div className="bg-white text-black p-8 md:p-12 print:bg-white print:text-black print:p-12"> {/* 内容 */} </div>讲师点评：记住，在打印模式下，background-color默认是transparent的。如果你想让背景色打印出来，必须显式设置。否则，你的设计图再美，打印出来也是一片惨白，老板会以为你偷工减料。
第四阶段：分页逻辑——这是重头戏！
这是今天最核心的部分。如何防止表格被切断？如何保证标题和内容在一起？
CSS 提供了一套分页属性：page-break-before,page-break-after,page-break-inside。
1. 表格的分页噩梦
在 Web 端，表格是流式的。但在打印时，表格行是不能随便被切开的。如果一行数据跨越了页眉和页脚，或者跨越了两页，那绝对是个 Bug。
解决方案：page-break-inside: avoid
代码示例 4：防止表格被切断
import React from 'react'; const ReportTable = () => { return ( <table className="w-full border-collapse"> <thead> <tr> <th className="border p-2">项目</th> <th className="border p-2">金额</th> </tr> </thead> <tbody> {Array.from({ length: 20 }).map((_, index) => ( <tr key={index} className="hover:bg-gray-100"> {/* 关键属性：防止单元格被分页切断 */} <td className="border p-2 print:break-inside-avoid"> 这是一行很长的文本，用来测试分页效果。 </td> <td className="border p-2 print:break-inside-avoid"> {index * 100} </td> </tr> ))} </tbody> </table> ); };讲师点评：看到了吗？我们在 Tailwind 中使用了print:break-inside-avoid。这告诉浏览器：“嘿，兄弟，这一行要是切到下一页去，我就跟你急！”
但是，这有个副作用：如果一页只剩下一行，这一行会跑到下一页，导致当前页面留白。这叫“分页不完美”，但在财务报表中是可接受的。
2. 标题与内容的分页
很多时候，我们希望标题出现在每一页的顶部，或者第一部分的内容不要和第二部分混在一起。
代码示例 5：强制分页符
/* PrintStyles.css */ @media print { /* 标题前强制分页，防止标题出现在页面的底部 */ .section-title { page-break-before: always; page-break-after: avoid; } /* 段落前分页，防止段落被切断 */ .paragraph { page-break-inside: avoid; } }第五阶段：react-to-print 库的深度解析
虽然我们可以手写打印逻辑，但 React 社区有一个神器——react-to-print。它封装了复杂的ref和window.print()调用，让我们的代码更简洁。
1. 基础用法
安装：npm install react-to-print
代码示例 6：使用 react-to-print
import React, { useRef, useState } from 'react'; import { useReactToPrint } from 'react-to-print'; const InvoiceComponent = () => { const componentRef = useRef(); const [isReady, setIsReady] = useState(false); // 初始化打印函数 const handlePrint = useReactToPrint({ content: () => componentRef.current, onBeforePrint: () => { console.log('准备打印...'); setIsReady(true); // 可以在这里加载数据 }, onAfterPrint: () => { console.log('打印完成'); setIsReady(false); }, }); return ( <div> <button onClick={handlePrint} className="no-print"> 打印发票 </button> <div className="print-only-container"> <div ref={componentRef}> <h1>发票详情</h1> <p>金额：$99.99</p> </div> </div> </div> ); };讲师点评：react-to-print的核心是ref。它把你要打印的内容“提取”出来，生成一个快照，然后调用打印。这比我们手动控制display: none要干净得多，因为它不会影响主界面的状态。
第六阶段：Grid 与 Flexbox 在打印时的“罢工”
这是很多现代 React 开发者最容易踩的坑。现在我们都爱用 CSS Grid 和 Flexbox 布局。但是，CSS Grid 在打印时默认是不创建新页面的！
1. Grid 布局的分页问题
假设你做了一个卡片列表，打印时，浏览器会把卡片挤在一起，直到填满一页，然后才换页。这会导致卡片变形，内容溢出。
解决方案：结合break-inside: avoid和 Grid
@media print { .card-grid { display: grid; /* 根据纸张大小调整列数，A4纸大约是 210mm */ grid-template-columns: repeat(2, 1fr); gap: 1rem; } .card { /* 关键！防止卡片被切断 */ break-inside: avoid; border: 1px solid #ccc; padding: 10px; height: 100%; } }讲师点评：这里的height: 100%很重要。如果卡片没有高度，break-inside: avoid可能不起作用。我们需要给卡片一个最小高度，或者让它们的高度由内容撑开但不要被切断。
2. Flexbox 的对齐问题
Flexbox 在打印时，justify-content和align-items的表现可能不如预期。特别是align-items: flex-start，在打印时可能会因为分页导致对齐错乱。
解决方案：尽量使用块级布局，或者在打印时强制使用块级标签。
第七阶段：高级技巧——打印预览与 PDF 导出
除了打印到物理纸张，现在很多需求是导出 PDF。打印对话框其实就是最原始的 PDF 生成器。
1. 打印前的数据预览
在打印之前，用户可能需要看到“预览”。我们可以利用@media screen和@media print的配合。
代码示例 7：动态切换视图
const PreviewPage = ({ data }) => { const [view, setView] = useState('screen'); // 'screen' or 'print' return ( <div className={`container ${view === 'print' ? 'print-mode' : ''}`}> <div className="controls no-print"> <button onClick={() => setView('print')}>预览打印</button> <button onClick={() => setView('screen')}>返回编辑</button> </div> <div className="content"> {/* 这里是打印的内容 */} <h1>{data.title}</h1> <p>{data.body}</p> </div> </div> ); };2. 处理复杂的 DOM 结构
有时候，你的 React 组件里嵌套了很深的div。打印时，浏览器可能会为了节省墨水而忽略某些深层的背景色。
技巧：使用box-shadow代替border
在屏幕上，我们用边框；在打印时，box-shadow会渲染成实心边框，而border可能会变细或者消失。
@media print { .box { border: 1px solid black; /* 打印时可能很淡 */ box-shadow: 0 0 0 1px black; /* 打印时变成实线边框 */ } }第八阶段：实战案例——一张复杂的财务报表
为了把前面讲的所有东西串起来，我们来做一个综合案例。假设我们要打印一张财务报表，包含表头、表格、备注，并且要处理分页。
代码示例 8：完整的打印组件
import React, { useState, useEffect, useRef } from 'react'; import './ReportPrintStyles.css'; const FinancialReport = ({ reportData }) => { const componentRef = useRef(); const [isPrinting, setIsPrinting] = useState(false); useEffect(() => { if (isPrinting) { window.print(); } }, [isPrinting]); const handlePrint = () => { setIsPrinting(true); }; return ( <div className="print-wrapper"> {/* 屏幕视图 */} <div className="screen-view"> <h1>财务报表预览</h1> <button onClick={handlePrint} className="btn-print"> 打印 / 导出 PDF </button> </div> {/* 打印视图 */} <div className="print-view" ref={componentRef}> <header className="report-header"> <h1>{reportData.title}</h1> <div className="report-meta"> <span>生成日期: {new Date().toLocaleDateString()}</span> <span>报表编号: {reportData.id}</span> </div> </header> <section className="report-section"> <h2 className="section-title">摘要</h2> <p className="paragraph">{reportData.summary}</p> </section> <section className="report-section"> <h2 className="section-title">详细数据</h2> <table className="data-table"> <thead> <tr> <th>科目</th> <th>金额</th> <th>备注</th> </tr> </thead> <tbody> {reportData.items.map((item, index) => ( <tr key={index} className="table-row"> <td className="cell">{item.subject}</td> <td className="cell">{item.amount}</td> <td className="cell">{item.note}</td> </tr> ))} </tbody> </table> </section> <footer className="report-footer"> <p>（本报表由系统自动生成，请勿手写涂改）</p> </footer> </div> </div> ); }; export default FinancialReport;对应的 CSS (ReportPrintStyles.css)
/* 基础重置 */ * { box-sizing: border-box; } /* 屏幕视图样式 */ .screen-view { padding: 2rem; text-align: center; } .btn-print { padding: 10px 20px; font-size: 16px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 4px; } /* 打印视图样式 */ .print-view { width: 210mm; /* A4 宽度 */ min-height: 297mm; /* A4 高度 */ margin: 0 auto; padding: 20mm; background: white; color: black; font-family: 'Times New Roman', Times, serif; } /* 打印专用媒体查询 */ @media print { body { background: white; } .screen-view { display: none !important; } .print-view { /* 确保打印时没有边距，或者根据需求调整 */ margin: 0; padding: 0; width: 100%; box-shadow: none; } /* 表格分页控制 */ .table-row { page-break-inside: avoid; /* 防止行被切断 */ } .section-title { page-break-before: always; /* 每个部分标题前强制换页 */ page-break-after: avoid; margin-top: 20px; text-align: center; } .paragraph { page-break-inside: avoid; text-align: justify; } /* 隐藏页脚的打印按钮等 */ .no-print { display: none !important; } }讲师点评：看到了吗？我们在 CSS 里使用了page-break-before: always。这意味着“在打印这一行（标题）之前，先换一页”。这保证了每个部分都在新的一页开始，阅读体验非常棒。
第九阶段：常见陷阱与调试技巧
最后，我们来聊聊那些“坑”。
1. 打印预览空白
如果你点击打印，结果出来一张白纸。
原因：可能是你的@media print规则把body隐藏了，但你的打印内容又放在了一个默认display: none的容器里。
解决：检查 CSS 优先级，确保打印内容容器在打印模式下是display: block。
2. 链接打印
你希望点击链接时打印页面。
解决：使用window.print()并阻止默认行为。
<a href="#" onClick={(e) => { e.preventDefault(); window.print(); }}> 打印 </a>3. 字体加载
React SSR 或动态加载字体时，打印时字体可能还没加载出来，导致排版错乱。
解决：在onAfterPrint中重新加载字体，或者确保字体在useEffect中加载完毕。
结语：打印是一门艺术
好了，同学们，今天的课程就到这里。
React 打印看似简单，实则暗藏玄机。它考验的是你对 CSS 媒体查询的理解，对浏览器渲染机制的了解，以及对用户体验的极致追求。
记住几个核心点：
@media print是你的主武器。page-break-inside: avoid是防止表格切断的护身符。- React 的状态管理是控制打印流程的指挥棒。
react-to-print是你的得力助手。
当你下次面对那个“打印出来的表格乱七八糟”的需求时，不要慌。深呼吸，打开你的编辑器，把@media print钩子加上，把break-inside属性加上，然后，优雅地打印。
下课！希望你们的打印机从此不再卡纸，老板也不再因为报表被切断而发火！
