HTML源码打印需五步：先转义字符（<→
HTML代码原样打印必须先转义
直接把 <div>hello</div> 放进 <p> 或 <div> 里，浏览器会解析执行，根本看不到标签。想打印出可读的 HTML 源码，第一步永远是字符转义。
常见错误现象：用 innerText 赋值、document.write() 输出、或没包裹就塞进普通容器——结果全是渲染后的文本，尖括号全消失。
-
<→<，>→>，&→& - 推荐用函数封装，比如：
escapeHtml(str)，避免手写正则漏掉边界情况 - 转义后必须放进
<pre><code>组合：前者保空格换行，后者启用等宽字体和语义标识
@media print 必须重置 pre 和 code 样式
默认 pre 有上下 margin，code 字体小、颜色浅，打印时容易被截头去尾或看不清。不加干预，A4 纸上可能只印出半行代码。
关键 CSS 规则要写死：
立即学习“前端免费学习笔记（深入）”；
pre { font-size: 12px; line-height: 1.4; background: white; color: black; border: none; page-break-inside: avoid; }code { font-family: 'Courier New', monospace; }- 务必加
@media print包裹，否则影响屏幕显示 - 如果页面含多段代码块，给每个
<pre>加class="code-block"，再统一控制分页更稳妥
导出 PDF 时 background-color 会被忽略
Chrome / Edge 默认关闭“背景图形”，导致 pre 的白色背景、高亮色块全变透明，打印出来是黑字印在白纸底上——看似正常，但导出 PDF 后再打印，可能因墨水渗透显灰影，影响可读性。
解决路径分两层：
- 在浏览器打印对话框中，手动勾选
Background graphics（Chrome 需点“更多设置”展开） - CSS 中补一句：
pre { -webkit-print-color-adjust: exact; color-adjust: exact; }，强制保留背景色 - 如果用 jsPDF + html2canvas 方案，背景色能保留，但要注意：它本质是截图，长代码块会模糊，必须设
scale: 2，且不支持自动分页
window.print() 前要确保 DOM 已静态化
React/Vue 页面、带 AJAX 渲染的后台预览页，调用 window.print() 时若数据还没回来，打印内容就是空的或旧快照。这不是样式问题，是时机问题。
- 不要在组件挂载后立刻绑定打印按钮，等
useEffect或mounted确认数据 ready 再启用按钮 - 服务端渲染（SSR）或静态生成（SSG）页最稳，因为 HTML 已完整吐出
- 临时方案：打印前加个
setTimeout(() => window.print(), 300)，但不可靠，仅作调试用 - 真正需要稳定输出的场景（如合同、报表），应走 Puppeteer 服务端生成 PDF，绕过浏览器渲染不确定性
