应使用隐藏 iframe 方案只打印指定 dom 区域：创建 iframe、写入目标元素 outerhtml、注入内联样式、调用其 contentwindow.print()，并注意移动端和 electron 的兼容性处理。
点击按钮触发 window.print() 会直接打印整个页面
这是最常见也最容易踩坑的地方：调用 window.print() 后，浏览器默认把当前整个 document 打印出来，包括导航栏、广告位、侧边栏——而用户只想打正文内容。
- 不要直接在按钮里写
onclick="window.print()"就完事 - 必须配合 CSS 媒体查询
@media print隐藏非关键元素 - 避免在打印样式里用
display: none隐藏 body 下的某些子元素后，再用display: block强行恢复——部分浏览器（尤其是 Safari）对 print 媒体中 display 切换支持不稳定 - 推荐做法：给要打印的区域加唯一 class（如
print-section），在@media print中隐藏除它以外的所有顶层容器
怎么只打印指定 DOM 区域（比如 article 或 div）
核心思路不是“选中再打印”，而是“构造临时打印上下文”。window.print() 无法指定范围，所以得绕道：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
document.createElement('iframe')创建隐藏 iframe - 把目标区域的
outerHTML写入 iframe 的document.body - 调用 iframe.contentWindow.print()
- 注意：iframe 必须已插入 DOM（哪怕
style="position: absolute; left: -9999px"）才能触发 print - 示例关键代码：
const iframe = document.createElement('iframe');<br>iframe.style.cssText = 'position:absolute;left:-9999px;';<br>document.body.appendChild(iframe);<br>const doc = iframe.contentDocument || iframe.contentWindow.document;<br>doc.open();<br>doc.write('' + targetElement.outerHTML + '');<br>doc.close();<br>iframe.contentWindow.print();
打印前需要重置样式，否则排版错乱
iframe 方案里，目标元素带进来的样式可能缺失或冲突，尤其依赖外部 CSS 文件时。不能指望原页面样式自动继承过去。
- 手动把关键样式内联到 iframe 的
中（比如字体、行高、margin） - 避免使用
@import或相对路径 CSS —— iframe 没有 base URL 上下文，url(./style.css)会 404 - 如果原页面用了 CSS-in-JS 或 Shadow DOM，
outerHTML会丢失样式绑定，此时只能用截图方案（如 html2canvas）替代 - 测试重点：打开开发者工具 → 切换到打印预览模式 → 检查是否出现未定义字体、空白块、错位列表
移动端和 Electron 环境下 window.print() 行为差异大
手机浏览器基本禁用 window.print()（Safari/Chrome for iOS 返回空操作，不报错也不弹窗）；Electron 中则需显式启用 webPreferences: { webviewTag: true, ... } 并监听 webContents.print() 事件。
- 判断是否可用：
typeof window.print === 'function' && !/iPhone|iPad|iPod/.test(navigator.userAgent) - 移动端 fallback 方案：生成 PDF 下载（用 jsPDF + html2canvas），或跳转到专用打印页（服务端渲染）
- Electron 中不要调用主进程的
window.print()，要用remote.getCurrentWebContents().print({ silent: false }) - 即使能调起打印对话框，Linux 下 CUPS 配置错误、Windows 上打印机脱机，都会让
window.print()静默失败——无 error 回调，也无 promise，只能靠用户反馈
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
