直接调用window.print()会把编辑器内容切得乱七八糟，因打印引擎不支持flex/grid、忽略内联样式、丢弃背景图、按视口截断，且web font未加载导致中文变方块；必须用独立print样式表，重置字体为pt单位、强制table-header-group、避免浮动与绝对定位，并通过打印预览逐页调试。
为什么直接调用 window.print() 会把编辑器内容切得乱七八糟
HTML 编辑器（比如 TinyMCE、Quill、或者自研的 contenteditable 区域）输出的 HTML 结构通常嵌套深、含大量内联样式、div 块堆叠、甚至带 iframe 或富媒体占位符。浏览器打印引擎对这类结构极其不友好：它会忽略 display: flex、重置 position: sticky、丢弃背景图、且默认按视口高度截断——结果就是只打出来“可视区”那几行，后面全空白。
必须重写打印上下文，不能只靠 @media print
编辑器内容往往不在标准文档流顶层，而是包裹在多层容器里；@media print 规则若写在全局 CSS 里，很容易被编辑器注入的高优先级内联样式覆盖，或因选择器作用域太窄而失效。更关键的是：编辑器可能动态加载字体、图标字体、或 Web Font，这些在打印时基本不加载，中文直接变方块。
- 用
<link rel="stylesheet" media="print" href="editor-print.css">单独引入打印样式表，比内联@media print更可靠 - 打印样式表里禁用所有非必要类名，直接针对语义标签写规则：
div[contenteditable] p, div[contenteditable] h1等 - 强制重设字体栈：
font-family: "Microsoft YaHei", SimSun, "Noto Sans CJK SC", sans-serif; - 字号统一用
pt：font-size: 12pt;，禁用rem、%、vh
表格、代码块、图片这些“分页杀手”怎么稳住
编辑器里插入的表格常跨页断裂、<pre class="brush:php;toolbar:false;"></pre> 代码块被截断、大图撑出页面边界——根本原因是浏览器对现代布局（flex/grid）和自动换行逻辑在打印通道中支持极弱。
- 表格：给
table加page-break-inside: avoid;；thead必须显式设为display: table-header-group;，否则跨页不重复 - 代码块：
pre, code设固定等宽字体 +white-space: pre-wrap;+overflow-x: visible;，再加break-inside: avoid; - 图片：限制最大宽度
max-width: 100%; height: auto;，并加page-break-inside: avoid;防止被切在中间 - 避免用
float或position: absolute布局编辑器内容区域，打印时它们大概率消失
局部打印编辑器内容时最易踩的三个坑
很多人用 document.body.innerHTML = editorEl.innerHTML 替换再打印，这在移动端和新版 Chrome 中极易失败：DOM 状态丢失、事件绑定清空、样式表引用断裂，甚至打印预览卡死。
- 别动
document.body.innerHTML—— 改用@media print+visibility: hidden隐藏非编辑器区域，保留完整 DOM 上下文 - 如果必须局部打印，用
iframe沙箱：创建隐藏iframe，写入编辑器 HTML 和打印样式，再调用其contentWindow.print() - 务必在打印前清除编辑器的焦点态、选区高亮、光标伪元素（如
::selection），否则可能打出半透明色块或空白矩形
真正难的不是让内容印出来，而是让不同用户、不同浏览器、不同打印机驱动下印出来的效果一致——这要求你放弃“一次写完就跑”的心态，老老实实进 DevTools 的 Rendering 面板开 Emulate CSS media → print，一页一页调边距、分页点、字体 fallback。否则上线后，第一张被投诉的 A4 纸，八成是表格头没重复、第二页开头缺标题、或者代码块被切成两半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
