应使用隐藏 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() 无法指定范围，所以得绕道：
- 用
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('<html><body>' + targetElement.outerHTML + '</body></html>');<br>doc.close();<br>iframe.contentWindow.print();
打印前需要重置样式，否则排版错乱
iframe 方案里，目标元素带进来的样式可能缺失或冲突，尤其依赖外部 CSS 文件时。不能指望原页面样式自动继承过去。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 手动把关键样式内联到 iframe 的
<head>中（比如字体、行高、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，只能靠用户反馈
