❌

阅读视图

发现新文章，点击刷新页面。

window.print 实现简单打印

✇掘金 前端
实习生小黄

1. 前言

浏览器内置打印功能，无需第三方库即可实现页面打印。通过 window.print() 可调用系统打印对话框，用户可直接打印或保存为 PDF。适用于发票、报告、表单等需要打印的场景。

2. 方法

2.1 window.print() 方法介绍

window.print() 是浏览器提供的全局方法，用于打开打印对话框。

语法：

window.print()

特点：

  • 无参数
  • 同步调用，立即打开打印对话框
  • 兼容主流浏览器（Chrome、Firefox、Safari、Edge 等）

使用示例：

<!-- 方式一：直接在 HTML 中调用 -->
<button onclick="window.print()">打印</button>

<!-- 方式二：在 JavaScript 中调用 -->
<script>
function printPage() {
    window.print();
}
</script>
<button onclick="printPage()">打印</button>

<!-- 方式三：使用事件监听器 -->
<script>
document.getElementById('printBtn').addEventListener('click', function() {
    window.print();
});
</script>

2.2 实际应用场景

在示例文件中，打印按钮的实现如下：

<button onclick="window.print()" class="bg-gray-800 text-white px-8 py-2 rounded">
    Print Invoice / PDF
</button>

点击按钮后，浏览器会：

  1. 打开系统打印对话框
  2. 显示打印预览
  3. 允许用户选择打印机或保存为 PDF
  4. 应用打印样式（通过 @media print 定义的样式）

3. 不打印设置

通过 CSS 的 @media print 媒体查询，可控制打印时的样式和显示内容。

3.1 @media print 媒体查询

@media print 用于定义仅在打印时生效的样式规则。

基本语法：

@media print {
    /* 打印时的样式 */
}

3.2 隐藏不需要打印的元素

在示例文件中，使用了 .no-print 类来隐藏打印按钮：

@media print {
    .no-print {
        display: none;
    }
}

HTML 中的使用：

<div class="no-print">
    <button onclick="window.print()">打印按钮</button>
</div>

3.3 其他常用的打印样式设置

示例文件中还展示了其他打印优化：

@media print {
    /* 设置背景为白色 */
    body {
        background-color: white;
    }
    
    /* 隐藏不需要打印的元素 */
    .no-print {
        display: none;
    }
    
    /* 移除阴影和边框（打印时不需要视觉效果） */
    .invoice-card {
        box-shadow: none;
        border: none;
    }
}

3.4 更多打印样式技巧

隐藏特定元素：

@media print {
    /* 隐藏导航栏 */
    nav { display: none; }
    
    /* 隐藏侧边栏 */
    aside { display: none; }
    
    /* 隐藏按钮 */
    button { display: none; }
    
    /* 隐藏特定类 */
    .no-print { display: none; }
}

优化打印布局：

@media print {
    /* 避免分页时断开元素 */
    .keep-together {
        page-break-inside: avoid;
    }
    
    /* 在元素前强制分页 */
    .page-break-before {
        page-break-before: always;
    }
    
    /* 在元素后强制分页 */
    .page-break-after {
        page-break-after: always;
    }
}

调整打印颜色：

@media print {
    /* 使用黑白打印 */
    * {
        color: black !important;
        background: white !important;
    }
    
    /* 保留必要的颜色 */
    .important-text {
        color: black !important;
    }
}

4. 总结

window.print() 配合 @media print 可快速实现页面打印：

  1. 简单易用：一行代码即可调用打印功能
  2. 无需依赖：浏览器原生支持，无需引入第三方库
  3. 灵活控制：通过 CSS 媒体查询精确控制打印样式
  4. 用户体验好：支持打印预览和 PDF 保存

最佳实践：

  • 使用 .no-print 类隐藏不需要打印的交互元素（如按钮、导航栏）
  • 在打印样式中移除阴影、背景色等视觉效果
  • 使用 page-break 属性控制分页，避免内容被截断
  • 确保打印内容清晰易读，字体大小适中

这种方式适合发票、报告、表单等需要打印输出的场景，实现简单且效果良好。

❌