Javascript – 页面打印

在Web开发中，我们经常需要实现页面的打印功能，以便用户可以将页面内容保存到纸质文档中。在经过长时间的发展，现在大多数浏览器都提供了打印的API，使得前端开发者们可以方便地实现页面的打印功能。

打印方法

在Javascript中，我们可以通过调用window.print()方法来实现页面的打印。该方法没有任何参数，调用方法非常简单，可以直接在页面的某个按钮上绑定点击事件。

<button onclick="window.print()">打印</button>

通过上面的代码，我们可以在页面上创建一个按钮，用户点击后会弹出打印对话框，简单便捷。

打印样式

但是，如果直接使用上面的代码，打印出来的页面可能会非常难看，因为样式等视觉效果并没有得到保留。因此，我们需要通过样式表的方式来设置打印时的样式。

我们可以通过创建一个专门的打印样式表来实现。我们可以在HTML头部中通过<link>元素来指定打印样式表：

<link href="print.css" rel="stylesheet" media="print">

通过media属性指定样式表仅在打印时生效，不影响浏览器的显示效果。

针对使用了Bootstrap等框架的页面，打印时需要进行一些额外的样式设置。例如，需要将页面中的col-*等布局和栅格类忽略掉，以免在打印时影响视线。我们可以在打印样式表中添加以下样式。

@media print {
  .container, .container-fluid {
    width: auto !important;
  }

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
  }
}

上面的代码中，我们将.container和.container-fluid类的宽度设为了auto，同时将所有栅格类的位置按照左对齐的方式重新排列。这样，在进行打印操作时，页面就可以自动进行排版，同时保证当前页面中使用的样式仍然能够保留下来。

打印事件

有时候，我们需要在用户进行打印操作时执行一些特定的操作，比如发送后台请求、保存打印日志等。此时，我们需要在打印事件中添加相应的代码。

浏览器提供了两个打印事件：onbeforeprint和onafterprint。当用户点击打印按钮后，浏览器会首先触发onbeforeprint事件，其次才会弹出打印窗口。最终，当用户关闭打印窗口后，浏览器会触发onafterprint事件。

我们可以通过使用window.matchMedia方法来监听这两个事件。

window.onbeforeprint = function () {
  // 在打印前执行的操作
};

window.onafterprint = function () {
  // 在打印后执行的操作
};

示例代码

下面是一个包含打印样式和打印事件的示例代码。

<!DOCTYPE html>
<html>
<head>
  <title>打印示例</title>
  <link href="print.css" rel="stylesheet" media="print">
</head>
<body>
  <h1>打印示例</h1>
  <p>这是一段测试数据。</p>
  <button id="print-btn">打印</button>

  <!-- 在页面底部添加一个隐藏的提示框 -->
  <div id="print-tip" style="display: none;">正在打印，请稍候...</div>

  <script>
    // 监听打印事件
    window.onbeforeprint = function() { 
      // 在打印前显示提示框
      document.getElementById("print-tip").style.display = "block";
      // 发送日志请求
      sendLog();
    };

    window.onafterprint = function() { 
      // 在打印后隐藏提示框
      document.getElementById("print-tip").style.display = "none";
    };

    // 绑定打印按钮的点击事件
    var printBtn = document.getElementById("print-btn");
    printBtn.onclick = function() {
      // 显示提示框
      document.getElementById("print-tip").style.display = "block";
      // 延时1秒后执行打印操作
      setTimeout(function() {
        window.print();
      }, 1000);
    };

    // 发送日志请求
    function sendLog() {
      // 将请求代码省略
      console.log("正在发送日志请求...");
    }
  </script>
</body>
</html>