用途:把网页样式整理成适合纸张输出的打印样式表,让页面打印或另存为 PDF 时呈现刻意设计的效果,而不是简单按 Cmd+P 的结果。适用于用户要求“让页面可打印”“添加打印样式”、制作邀请函/门票/报告/发票等需打印页面、生成网页的“另存为 PDF”版本,以及修复打印布局问题。
主要能力:提供完整的 @media print 骨架,按顺序包含页面设置、强制颜色还原、基础排版、隐藏仅网页元素、禁用动画、扁平化布局、分页控制、图片、链接与表格规则。
使用方式:在 @media print 内按骨架顺序逐段编写样式。关键做法包括:用 @page 设置 size 与 margin;用 print-color-adjust: exact 保留颜色;正文用 pt 而非 px(如 10.5pt);隐藏 nav、广告、cookie 提示等元素;用 page-break-inside/break-inside、orphans、widows 控制分页;用 a[href^="http"]::after 输出链接 URL;用 thead display: table-header-group 让表头跨页重复。提供 .no-print、.print-only、.print-break-before、.print-break-after、.no-print-url 等工具类。
适用场景与限制:含 Next.js、React/CSS-in-JS、Tailwind、Flexbox/Grid 的框架注意事项(如 next/image fill 需改为 static、暗色模式需覆盖、fixed 转 static、flex/grid 需 display: block)。测试建议用 DevTools 模拟 print 快速迭代,并最终在真实打印预览中确认(模拟看不到分页与 @page 效果)。需注意 @page margin 浏览器支持有限、flex/grid 上 break-inside 不可靠、背景图默认不打印、自定义字体可能不加载等。资料未提供安装命令、收费信息或性能数据。