应使用@media print隔离打印样式，手动隐藏非内容元素，设置衬线字体、增大行高、重置页边距，并兼顾Chrome与Firefox兼容性，测试务必另存为PDF验证。
打印时页面乱码或布局错乱怎么办
浏览器默认会把网页所有样式（包括背景色、浮动菜单、侧边栏）一并打印，结果往往是内容被截断、文字叠在一起，甚至白纸一片。根本原因是没用 @media print 隔离打印专用样式。
- 必须在
<style>或 CSS 文件中用@media print { ... }包裹打印规则，不能直接写在普通样式里 - 打印时浏览器会忽略
display: none以外的多数交互类样式（比如hover），但不会自动隐藏广告位、导航栏等区域，得手动设display: none - 慎用
background-image和background-color：多数打印机默认关闭背景图形打印，即使写了也不会出效果
怎么让正文清晰可读又省纸
打印不是屏幕渲染，重点是信息密度和可读性。字体、行高、页边距这些参数直接影响实际输出效果。
- 强制使用衬线字体提升可读性：
font-family: "Times New Roman", serif;（无衬线字体如Helvetica在纸上易疲劳） - 增大行高：
line-height: 1.6;比默认值更利于阅读，避免文字挤成黑块 - 重置页边距：
@page { margin: 1cm; }（注意：部分浏览器如 Chrome 对@page支持有限，优先用body { margin: 0.5cm; }兜底） - 禁用分页断字：
word-break: keep-all;防止英文单词在行尾被错误拆开
如何隐藏导航栏、按钮、广告等非内容元素
用户点“打印”是为了保存内容，不是截图整个页面。不加控制的话，header、nav、.ad-banner 这些都会占满一页。
Claude风格HTML汇报文件
下载
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
- 给非内容区块统一加 class，比如
class="no-print"，然后在打印样式里写：.no-print { display: none !important; } - 如果用框架（如 Bootstrap），注意它的
.d-none类不响应@media print，得额外补充：@media print { .d-none.d-print-none { display: none !important; } } - 表单控件（
input、button）默认不可打印，但若用了自定义样式（如背景色+圆角），需显式设background: transparent; border: none;否则可能留白框
Chrome/Firefox 打印预览差异大，怎么兼容
Firefox 默认启用背景图形打印，Chrome 默认关闭；Chrome 支持 @page 的 size 属性（如 A4），Firefox 则常忽略。靠单一 CSS 很难完全一致。
立即学习“前端免费学习笔记（深入）”；
- 优先适配 Chrome：它市占率高且预览最接近真实输出，用
@page { size: A4; margin: 0.7cm; }控制纸张 - 对 Firefox 做降级处理：把关键尺寸（如最大宽度）写在普通样式里，例如
main { max-width: 210mm; margin: 0 auto; }，避免内容溢出 - 测试时别只看“打印预览”，务必点“另存为 PDF”再打开检查——这是最接近真实打印的行为
最容易被忽略的是图片处理：未设置 max-width: 100% 的大图会撑破页面；带 srcset 的响应式图在打印时可能加载错分辨率；SVG 如果含 <defs> 或滤镜，某些浏览器会直接不渲染。这些细节不试一次根本发现不了。
