@media print在编辑器中没反应，是因为在线工具（如codepen）将html渲染在iframe内，父页样式无法穿透；必须用或显式声明，且禁用@import、flex/grid，设置thead{display:table-header-group}并平级书写@page。

为什么直接写 @media print 在编辑器里没反应

因为在线 HTML 编辑器（如 CodePen、JSFiddle、甚至某些富文本编辑器的预览 iframe）默认把 HTML 渲染在子 iframe 里，而父页面写的 @media print 样式不会穿透到 iframe 内部。你看到的“预览区”根本不是打印媒体上下文，@media print 块压根没被解析。

常见错误现象：window.print() 调用后，预览窗口还是屏幕样式；或者改了 .sidebar { display: none; }，但打印出来导航栏还在。

• 别在主编辑区写 @media print 就以为万事大吉——它对 iframe 里的运行结果无效
• CodePen 等平台即使支持 <link rel="stylesheet" media="print">，若 CSS 文件托管在外且未配 CORS，浏览器会静默丢弃规则
• 本地调试最稳：把完整 HTML + @media print 写进一个 .html 文件，用 Chrome 直接打开

怎么让打印样式真正生效：必须用 <link media="print"> 或内联 <style media="print"></style>

@media print 不是 JS 控制的 class 切换逻辑，浏览器打印引擎只认这个媒体类型本身。任何用 document.body.classList.add("print-mode") 配合 .print-mode .nav { display: none; } 的做法，打印时都会失效。

正确加载路径只有两条：

• 外链方式（推荐）：<link rel="stylesheet" href="print.css" media="print"> —— 注意 media 值必须小写、无空格，"PRINT" 或 " print" 都无效
• 内联方式（适合快速验证）：<style media="print">body { font-size: 12pt; } .no-print { display: none !important; }</style> —— 必须加 media="print" 属性，仅写 <style></style> 不行

别用 @import 引入打印样式：Safari 和旧 Edge 会跳过，导致整块规则丢失。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

打印预览里表格断开、表头消失？关键不是 page-break-inside

表格跨页断裂的根本原因，是浏览器没把 <thead> 当作可重复的页眉组处理，且默认 <code><tr> 的 <code>display 值可能被重置（尤其用了 reset.css 或框架）。

只写 tr { page-break-inside: avoid; } 没用，必须配合显式 display 声明：

• thead { display: table-header-group !important; } —— 这才是让表头在每页顶部自动重复的必要条件
• tfoot { display: table-footer-group !important; }
• tr { display: table-row !important; page-break-inside: avoid !important; }
• 禁用包裹表格的 display: flex 或 display: grid 容器——打印引擎对它们基本不支持

另外，@page 规则必须和 @media print 平级，不能嵌套其中。写成这样是非法的：@media print { @page { size: A4; } }，整个 @page 块会被忽略。

调试时怎么实时看到效果？别只靠开发者工具模拟

Chrome / Edge / Safari 开发者工具的 Rendering 面板里勾选 Emulate CSS media type → print，能快速验证 display: none、字体颜色、字号是否生效，但它不触发分页逻辑、@page 尺寸或 thead 重复行为。

真实分页问题必须进打印预览确认：

• 按 Ctrl+P（Windows）或 Cmd+P（macOS），看内容是否被裁切、第二页有没有表头、图片是否溢出
• Safari 对 @page 支持弱，即使模拟 print 媒体，@page { size: A4; margin: 15mm; } 也可能不生效
• 如果页面含 <iframe></iframe>，需单独为 iframe 内容写打印样式，父页的 @media print 不会穿透

最容易被忽略的一点：打印样式中必须显式重置 body 的 margin 和 padding，否则浏览器默认打印边距会干扰布局；同时禁用所有背景色和图片，用 background: transparent !important，否则深色背景可能导致文字反白或墨水浪费。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！