ES6 | 页面打印

在前端开发中，经常需要用户将页面内容打印，以便他们可以保存在自己的电脑上或者分享给其他人。ES6 中提供了一种新的定位处理打印的 API，下面我们来了解一下。

使用 window.print()

在 ES6 中，使用 window.print() 会将当前浏览器窗口的内容打印出来，不需要在 DOM 上操作即可打印。我们来看一个例子：

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

在这个例子中，我们使用 window.print() 定位处理打印操作，这个函数会创建一个打印页面的默认页面视图，如果浏览器默认打印的设置已经满足则直接打印，否则会弹出设置页面。

自定义页面打印

如果你需要自定义打印的页面内容，可以使用 CSS media query 实现。具体来说，可以在打印 CSS 中定义不同的样式，例如：

@media print {
  body {
    font-size: 16pt;
  }
}

这样当用户需要页面打印时，会自动触发打印样式，并将文档转化为 PDF 或其他打印格式。

使用 JavaScript 控制打印操作

如果你需要更加细致地控制打印操作，可以使用 JavaScript 控制。比如，你可以在用户点击打印按钮后弹出打印设置页，或者在打印前执行一些复杂操作。

HTML：

<button id="print-btn" onClick="printPage()">Print</button>

JavaScript：

function printPage() {
  window.print();
}

当你需要控制更多的打印操作时，可以使用 JavaScript 监听 beforeprint 和 afterprint 事件进行操作。

结语

在 ES6 中使用页面打印功能非常便捷，通过 window.print() 可以轻松实现打印功能。如果你需要更进一步的控制，可以使用 CSS media query 或者 JavaScript 进行控制。