如何使用 JavaScript 打印网页？

JavaScript 可以帮助我们直接在网页上调用打印功能，方便用户将页面内容打印下来。在本文中，将学习如何使用 JavaScript 打印网页，以及打印设置和一些技巧。

使用 window.print() 方法打印网页

在 JavaScript 中，可以使用 window.print() 方法来调用浏览器的打印功能。当用户点击页面上的打印按钮时，可以调用该方法，使得浏览器弹出打印窗口。

document.getElementById("printBtn").addEventListener("click", function() {
  window.print();
});

上述代码会为 id 为 "printBtn" 的按钮添加点击事件监听器，点击该按钮时会调用 window.print() 方法。

注意：在 Chrome 和 Edge 浏览器中，该方法只能在用户交互后调用，例如在点击事件回调函数中调用。

打印设置

除了使用 window.print() 方法外，还可以通过修改 window.print() 方法的参数来进行打印设置。例如，可以设置打印纸张的大小和方向，设置打印的文本的字体，缩放等。

document.getElementById("printBtn").addEventListener("click", function() {
  var printContents = document.getElementById("printContent").innerHTML;
  var originalContents = document.body.innerHTML;
  document.body.innerHTML = printContents;
  window.print();
  document.body.innerHTML = originalContents;
});

上述代码会为 id 为 "printBtn" 的按钮添加点击事件监听器，点击该按钮时会将 id 为 "printContent" 的元素的内容作为打印内容进行打印，同时保证原始的网页内容不受影响。

打印样式

打印的样式可能与我们在浏览器中看到的样式不同。为了控制打印时的样式，可以在 CSS 文件中使用 @media 打印设备属性。例如，下面的代码会为打印设置纸张为 A4 并设置页边距。

@media print {
  body {
    width: 210mm;
    height: 297mm;
    margin: 20mm;
  }
}

小结

使用 JavaScript 打印网页可以方便用户将当前页面的内容打印出来。通过修改打印设置和打印样式，可以控制打印的效果。