window.print()可直接触发浏览器原生打印对话框，需配合@media print隐藏非正文元素并优化样式，注意其同步阻塞特性及移动端兼容性。

直接调用 window.print() 就能触发浏览器原生打印对话框，但要确保打印内容合理、样式可控，避免误打导航栏或侧边栏等非正文元素。

基础用法：一句话触发打印

在任意 JavaScript 代码中（比如按钮点击事件里）写：

• window.print(); —— 执行后会立即弹出系统级打印设置窗口（含预览），用户可选择打印机、页数、是否背景图形等
• 该方法是同步阻塞的：调用后 JS 会暂停执行，直到用户关闭打印对话框（无论点“打印”还是“取消”）

控制打印内容：用 CSS 媒体查询隐藏无关元素

默认会打印整个页面，通常需要隐藏 header、nav、广告位等。在 CSS 中添加：

@media print {
  header, nav, aside, .no-print, .btn-print {
    display: none !important;
  }
  body {
    font-size: 12pt; /* 打印时更合适的字号 */
  }
}

然后给不想打印的元素加上 class="no-print"，或者直接用内联样式：<div style="display: none" class="no-print">…</div>

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

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

优化打印体验的小技巧

提升用户实际打印效果和操作流畅度：

• 打印前聚焦主要内容区域（如 document.getElementById('print-area').focus();），部分浏览器会优先打印聚焦区域
• 避免使用 background-image 或透明色——多数浏览器默认不打印背景，需手动在打印设置中勾选“背景图形”
• 对表格、长图等复杂内容，建议加 page-break-inside: avoid; 防止被截断
• 移动端 Safari 对 window.print() 支持有限，部分机型可能无响应，可提前检测：if (typeof window.print === 'function') { ... }

配合 HTML 按钮快速实现

最常见场景：页面放一个“打印本页”按钮

<button onclick="window.print()" class="no-print">? 打印当前页面</button>

注意把按钮本身也设为 no-print，否则会出现在打印结果里。