JS调用打印机直接打印|极客笔记

JS调用打印机直接打印

随着互联网技术的迅速发展，大多数信息交流方式都是通过电子设备进行的，比如电脑、手机等。但有时候我们还是需要把一些信息以实物形式呈现出来，比如打印文件、打印照片等。在网页开发中，有时候也会遇到需要将页面内容直接打印到打印机上的情况。本文将介绍如何使用JavaScript调用打印机直接打印页面内容。

使用window.print()方法

最简单的方法就是使用JavaScript中的window对象的print()方法。通过这个方法，我们可以直接调用系统的打印功能，将当前页面的内容打印出来。

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

在上面的代码中，我们定义了一个名为printPage的函数，当调用这个函数时，页面将会调用系统的打印功能。我们可以将这个函数绑定到一个按钮或其他事件上，从而实现通过点击按钮或其他操作来触发打印功能。

打印指定内容

有时候我们可能只需要打印页面中的某一部分内容，而不是整个页面。这时候可以使用@media print来控制打印的样式，或者使用JavaScript来动态生成需要打印的内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Print Example</title>
  <style>
    @media print {
      body * {
        visibility: hidden;
      }
      .print-content, .print-content * {
        visibility: visible;
      }
    }
  </style>
</head>
<body>
  <div class="content">
    <p>This is the content that will not be printed.</p>
    <div class="print-content">
      <p>This is the content that will be printed.</p>
    </div>
  </div>
  <button onclick="printContent()">Print</button>

  <script>
    function printContent() {
      window.print();
    }
  </script>
</body>
</html>

在上面的示例中，我们通过CSS的@media print来控制需要打印的内容。当触发打印事件时，只有类名为print-content的内容会被打印出来。

使用第三方库

除了原生的window.print()方法外，还有一些第三方库可以帮助我们更好地控制打印的内容和样式，比如jquery.print和print-js等。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Print Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-print@1.8.0/dist/jQuery.print.min.js"></script>
</head>
<body>
  <div id="content">
    <p>This is the content that will be printed.</p>
  </div>
  <button id="print">Print</button>

  <script>
     $('#print').on('click', function() {$ ('#content').print();
    });
  </script>
</body>
</html>

在上面的示例中，我们引入了jquery库和jquery.print插件，并使用插件提供的print()方法来实现打印功能。