JavaScript 实现網頁打印處理

2023年5月19日下午7:42 • JavaScript

要在网页上实现打印功能，可以使用 JavaScript 来控制页面的打印行为。下面是一些实现网页打印的攻略：

1. 使用 window.print 方法

window.print() 是 JavaScript 的内置方法，用于打开浏览器的打印框架并弹出打印对话框。为了使打印结果更好的呈现，建议在打印前设置适当的 CSS 样式，以适应打印机的纸张格式。

示例 1：

<!DOCTYPE html>
<html>
<head>
  <title>打印示例1</title>
  <style>
    @media print {
      h1 {
        color: #0000FF;
      }
    }
  </style>
</head>
<body>
  <h1>这是一份简单的打印示例</h1>
  <p>打印前可以调整 CSS 样式，以适应打印机的纸张格式。</p>
  <button onclick="window.print()">点击打印</button>
</body>
</html>

示例 2：

<!DOCTYPE html>
<html>
<head>
  <title>打印示例2</title>
  <style>
    @media print {
      .hide {
        display: none;
      }
      table {
        border-collapse: collapse;
        border: 1px solid #000;
      }
      th, td {
        padding: 5px;
        border: 1px solid #000;
      }
    }
  </style>
</head>
<body>
  <button class="hide" onclick="window.print()">点击打印</button>
  <h2>订单详情</h2>
  <table>
    <tr>
      <th>商品名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>总价</th>
    </tr>
    <tr>
      <td>产品1</td>
      <td>￥60.00</td>
      <td>2</td>
      <td>￥120.00</td>
    </tr>
    <tr>
      <td>产品2</td>
      <td>￥25.00</td>
      <td>5</td>
      <td>￥125.00</td>
    </tr>
    <tr>
      <td colspan="3">合计：</td>
      <td>￥245.00</td>
    </tr>
  </table>
</body>
</html>

2. 使用 JavaScript 编写打印函数

在复杂的场景中，window.print() 可能无法满足我们的需求，这时我们可以使用 JavaScript 编写自定义的打印函数。

实现步骤

编写 HTML 模板
编写打印函数，将 HTML 转换为可打印的字符串
在打印函数中添加需要的 CSS 样式和 JavaScript 代码
调用打印函数并打印

示例 3：

<!DOCTYPE html>
<html>
<head>
  <title>打印示例3</title>
  <style>
    body {
      font-family: Arial;
      font-size: 12pt;
    }
    .invoice {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 10px;
    }
    .invoice th, .invoice td {
      padding: 10px;
      border: 1px solid #ccc;
      text-align: left;
    }
    .invoice th {
      background-color: #f5f5f5;
    }
    .invoice td {
      font-size: 10pt;
    }
    .invoice .total {
      font-weight: bold;
    }
    @media print {
      .no-print {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div class="no-print">
    <p>订单号：1234567890</p>
    <p>客户名称：张三</p>
    <button onclick="printInvoice()">打印</button>
  </div>
  <div id="invoice-wrap"></div>
  <script>
    function printInvoice() {
      var invoiceHtml = `
<div>
  <h1>订单详情</h1>
  <table class="invoice">
    <thead>
      <tr>
        <th>商品名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>金额</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>¥50.00</td>
        <td>2</td>
        <td>¥100.00</td>
      </tr>
      <tr>
        <td>产品2</td>
        <td>¥25.00</td>
        <td>3</td>
        <td>¥75.00</td>
      </tr>
      <tr>
        <td class="total" colspan="3">合计：</td>
        <td class="total">¥175.00</td>
      </tr>
    </tbody>
  </table>
</div>`
      var oldInnerHTML = document.body.innerHTML;
      document.body.innerHTML = invoiceHtml;
      window.print();
      document.body.innerHTML = oldInnerHTML;
    }
  </script>
</body>
</html>

以上就是实现 JavaScript 实现网页打印的完整攻略，有了这些知识，您就可以在网页中轻松地实现打印功能了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 实现網頁打印處理 - Python技术站