动态多受众导出排版组件生成CSS Print与分页控制实战在企业级报告、周报归档与合同打印的 Web 开发中用户经常需要使用浏览器的原生打印功能Ctrl P / Cmd P将网页直接导出为标准的A4 物理纸张或矢量 PDF 文档。然而在通过 AI 自动生成页面时大部分前端工程师直接调用window.print()结果导出的 PDF 惨不忍睹页面元素被腰斩截断Awkward Page Breaks一行文字或一个完整的卡片被正好切在两页 A4 纸的正中间上半截在第 1 页下半截在第 2 页背景色与阴影丢失浏览器的打印预览默认会抹除所有的背景色background-color导致原本精美的浅蓝色卡片全部变成白底黑字的简陋线框冗余 UI 污染打印稿网页上的侧边栏导航、顶层操作按钮、返回顶部小部件全部被强行打印进了 PDF 里。为了让 AI 生成的代码达到出版级精美度、完美控制 A4 分页与精准受众视图隔离我们提炼了一套基于现代 CSS Paged Media 规范page/media print的打印排版标准。CSS Print 核心控制规范与模型┌─────────────────────────────────────────────────────────────┐ │ CSS Print 打印媒介样式层级 │ ├──────────────────────────────┬──────────────────────────────┤ │ 1. page 纸张尺寸与边距 │ size: A4 portrait; margin: 15mm│ │ 2. print-color-adjust: exact │ 强制保留背景色与渐变质感 │ │ 3. break-inside: avoid │ 严禁卡片跨页被中间切断腰斩 │ │ 4. .print-only / .no-print │ 显隐打印专用页眉页脚与操作栏 │ └──────────────────────────────┴──────────────────────────────┘实战实现出版级周报 A4 打印与 PDF 导出组件import React, { useRef } from react; import { Printer, Download } from lucide-react; export interface MultiAudienceReportData { title: string; author: string; department: string; dateStr: string; execSummary: string; // 管理层视角摘要 techDeepDive: string; // 技术深度攻坚 nextWeekPlans: string[]; } export const PrintableReportDocument: React.FC{ data: MultiAudienceReportData } ({ data }) { const handlePrint () { window.print(); }; return ( div classNamemax-w-4xl mx-auto p-6 bg-slate-100 min-h-screen {/* 1. 屏幕操作栏打印时通过 class 自动隐藏 */} div classNameno-print flex justify-between items-center mb-6 p-4 bg-white border border-slate-200 rounded-xl shadow-sm div h3 classNamefont-bold text-slate-800 text-sm专业汇报排版视图/h3 p classNametext-xs text-slate-500已针对 A4 纸张与 PDF 导出完成发丝级排版优化/p /div button onClick{handlePrint} classNameflex items-center space-x-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg shadow transition-colors Printer classNamew-4 h-4 / span立即打印 / 存为 PDF/span /button /div {/* 2. 核心打印文档主体 (A4 标准纸张容器) */} div classNamea4-document-root bg-white p-12 shadow-lg border border-slate-200 rounded-2xl print:shadow-none print:border-none print:p-0 {/* 打印专用页眉仅在打印出的纸张顶部出现 */} div classNameprint-only border-b border-slate-300 pb-2 mb-6 flex justify-between text-xs text-slate-400 font-mono span{data.department} · 研发工作周报/span span机密文档 · 仅供内部审阅/span /div {/* 文档大标题与元数据 */} div classNamemb-8 border-b border-slate-200 pb-4 h1 classNametext-2xl font-extrabold text-slate-900 mb-2{data.title}/h1 div classNameflex space-x-4 text-xs text-slate-500 span汇报人: strong{data.author}/strong/span span周期: strong{data.dateStr}/strong/span /div /div {/* 板块一管理层视角摘要 (严禁跨页切断) */} section classNameprint-avoid-break mb-6 p-5 bg-blue-50/70 border border-blue-100 rounded-xl h2 classNametext-sm font-bold text-blue-900 mb-2 flex items-center span classNamew-2 h-2 bg-blue-600 rounded-full mr-2 / 【业务成果与管理层摘要】 /h2 p classNametext-xs text-slate-700 leading-relaxed whitespace-pre-wrap {data.execSummary} /p /section {/* 板块二技术架构攻坚详情 (允许自然流转但内部卡片防切断) */} section classNamemb-6 space-y-4 h2 classNametext-sm font-bold text-slate-900 border-l-4 border-blue-600 pl-2 【核心架构攻坚与技术突破】 /h2 div classNameprint-avoid-break p-4 bg-slate-50 border border-slate-200 rounded-xl text-xs text-slate-700 leading-relaxed whitespace-pre-wrap {data.techDeepDive} /div /section {/* 板块三下周排期 (强制保持完整) */} section classNameprint-avoid-break mb-6 p-4 bg-emerald-50/70 border border-emerald-100 rounded-xl h2 classNametext-sm font-bold text-emerald-900 mb-2 【下周交付规划与潜在风险】 /h2 ul classNametext-xs text-emerald-800 list-disc list-inside space-y-1 {data.nextWeekPlans.map((plan, idx) ( li key{idx}{plan}/li ))} /ul /section {/* 打印专用页脚 */} div classNameprint-only border-t border-slate-300 pt-3 mt-8 text-center text-[10px] text-slate-400 span本文档由智能周报工作台自动排版生成 · 保持高效与专注/span /div /div /div ); };配套 CSS Print 样式表核心规则print.css/* src/styles/print.css */ /* 1. 全局配置 A4 纸张尺寸与边距 */ page { size: A4 portrait; margin: 15mm 20mm; /* 留出舒适的打印白边 */ } /* 2. 仅在打印媒介生效的强制规则 */ media print { /* 强制浏览器渲染所有背景色与阴影 */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* 隐藏屏幕上的操作栏与无关元素 */ .no-print { display: none !important; } /* 仅在打印时展示页眉页脚 */ .print-only { display: flex !important; } /* 核心严禁特定卡片被跨页切断腰斩 */ .print-avoid-break { break-inside: avoid !important; page-break-inside: avoid !important; } /* 强制特定章节另起新的一页开始 */ .print-force-page-break { break-before: page !important; page-break-before: always !important; } body { background-color: #ffffff !important; font-size: 11pt !important; color: #1e293b !important; } } /* 屏幕模式下隐藏打印专属页眉页脚 */ media screen { .print-only { display: none !important; } }打印与 PDF 导出质量飞跃彻底消除卡片跨页腰斩事故借助break-inside: avoid大卡片在遇到页面底部时会自动整体移至下一页顶部排版整洁自然色彩与质感 100% 保真还原print-color-adjust: exact保证导出的 PDF 拥有完美的渐变与背景衬底多受众自适应切换一键生成面向 CEO、技术主管的出版级纸质/PDF 汇报材料极具企业级商务质感。
)
