JavaScript打印功能核心是window.print()触发+@media print样式控制+DOM预处理。需隐藏非内容元素、强制分页、避免截断，并注意图片路径、字体兼容及浏览器差异。

JavaScript 中实现打印功能主要靠 window.print()，但真正控制打印效果得靠 CSS 媒体查询和页面结构优化。光调用打印命令不够，用户常遇到内容被截断、空白页多、样式错乱等问题，核心在于“打印前准备”和“打印样式分离”。

用 window.print() 触发浏览器原生打印

这是最直接的方式，适合快速启用打印功能：

• 在按钮点击事件里写 window.print()，浏览器会弹出系统打印对话框
• 它默认打印当前整个 可见内容，不执行异步操作（比如未加载完的图片可能留白）
• 注意：该方法会阻塞后续 JS 执行，且无法监听是否真正打印成功或取消

用 @media print 定制打印样式

这是控制打印效果的关键。通过 CSS 媒体查询隐藏无关元素、调整布局、适配纸张：

• 在样式表中添加 @media print { ... } 块，里面写的样式只在打印时生效
• 常见操作：隐藏导航栏、侧边栏、按钮等非内容区域 —— .header, .sidebar, .print-btn { display: none; }
• 强制分页：用 page-break-before: always 或 break-before: page（推荐后者，更现代）控制标题另起一页
• 避免内容被截断：给长表格加 table { page-break-inside: auto; }，给行内元素加 word-break: break-word;

打印前临时修改 DOM 提升兼容性

有些场景下纯 CSS 不够用，比如要打印弹窗内容、或只打印某块区域：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“Java免费学习笔记（深入）”；

• 创建一个隐藏的 <div id="print-area">，把目标内容克隆进去，再调用 <code>print()
• 更稳妥的做法是：打开一个新窗口（window.open('', '_blank')），写入定制 HTML 和打印样式，再自动执行 print() 并关闭
• 示例片段：
  

  const w = window.open();<br>w.document.write(htmlString);<br>w.document.close();<br>w.print();<br>w.close();

  
  注意：部分浏览器会拦截弹窗，建议在用户点击后立即触发

处理图片、字体和跨浏览器细节

打印时资源加载和渲染行为和屏幕不同，容易出问题：

• 确保图片使用绝对路径或已缓存，否则打印时可能显示为占位符
• 避免依赖 Web 字体（如 Google Fonts），打印时很可能回退成系统字体；如需统一，优先用 serif / sans-serif
• Chrome 和 Edge 对 break-* 属性支持较好；Firefox 需加 -moz- 前缀；Safari 有时忽略某些分页指令，建议测试真实打印机输出
• 可加 @page { margin: 0.5in; } 统一设置页边距（注意：不能在里面写选择器，只支持简单属性）

基本上就这些。打印功能本身不复杂，但细节容易忽略——关键是把“屏幕展示”和“纸面输出”当成两个独立视图来设计。