动态生成HTML5打印多张发票示例

最新推荐文章于 2024-09-15 10:33:02 发布

浮華落尽

最新推荐文章于 2024-09-15 10:33:02 发布

阅读量117

点赞数 3

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/weixin_45010493/article/details/142136702

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态生成HTML5打印多张发票示例</title>
  <style>
    /* 默认样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    .invoice-container {
      max-width: 95%;
      margin: 20px auto;
      border: 1px solid #ccc;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      background-color: white; /* 明确指定背景色，以便在打印时覆盖 */
      page-break-inside: avoid; /* 防止在发票中间断开 */
      page-break-before: always; /* 在每个发票之前强制新页面开始 */
    }

    h1, h2, p, table {
      margin: 0 0 1em;
    }

    /* 表格单元格内容自动换行 */
    table td, table th {
      border: 1px solid #666;
      padding: 5px 10px;
      word-wrap: break-word; /* 允许长单词和URL自动换行 */
      white-space: pre-wrap; /* 保留空格和换行符，同时允许文本换行 */
    }

    /* 打印样式 */
    @media print {
      body {
        font-size: 12pt; /* 设置字体大小 */
        background-color: transparent; /* 打印时背景透明 */
      }

      /* 隐藏不希望打印的内容 */
      .no-print, .no-print * {
        display: none !important;
      }

      /* 添加页眉和页脚 */
      ::after {
        /*content: "第 " counter(page) " 页";*/
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 10pt;
        color: #666;
      }

      /* 重置表格样式 */
      table {
        page-break-inside: auto;
        border-collapse: collapse;
        width: 100%;
      }
      table thead, table tbody, table tfoot {
        page-break-inside: avoid;
      }
      table tr {
        page-break-inside: avoid;
        page-break-after: auto;
      }
      table td, table th {
        border: 1px solid #666;
        padding: 5px 10px;
        word-wrap: break-word; /* 允许长单词和URL自动换行 */
        white-space: pre-wrap; /* 保留空格和换行符，同时允许文本换行 */
      }

      /* 移除阴影 */
      .invoice-container {
        box-shadow: none;
      }
    }
  </style>
</head>
<body>
  <div id="invoicesContainer"></div>

  <!-- 不打印的内容 -->
  <div class="no-print">
    <button id="printButton">打印发票</button>
  </div>

  <script>
    // 模拟数据
    const invoiceData = [
      {
        number: 'INV-2024-08-29',
        date: '2024-08-29',
        items: [
          { number: '001', item: '服务A 这里是一段非常非常非常长的文字，需要在单元格内部自动换行一定要提瓦特挺无语特温特他他也热的天同一天电影天堂1一道题土地用途天堂地狱他大爷的同意太原地铁都有听一听……', quantity: 2, price: 100 },
          { number: '002', item: '服务B', quantity: 1, price: 150 },
          { number: '003', item: '服务C', quantity: 3, price: 200 }
        ]
      },
      {
        number: 'INV-2024-08-30',
        date: '2024-08-30',
        items: [
          { number: '001', item: '服务X', quantity: 1, price: 250 },
          { number: '002', item: '服务Y', quantity: 2, price: 300 },
          { number: '003', item: '服务Z', quantity: 4, price: 150 }
        ]
      },
      {
        number: 'INV-2024-08-30',
        date: '2024-08-30',
        items: [
          { number: '001', item: '服务X', quantity: 1, price: 250 },
          { number: '002', item: '服务Y', quantity: 2, price: 300 },
          { number: '003', item: '服务Z', quantity: 4, price: 150 }
        ]
      },
      {
        number: 'INV-2024-08-30',
        date: '2024-08-30',
        items: [
          { number: '001', item: '服务X', quantity: 1, price: 250 },
          { number: '002', item: '服务Y', quantity: 2, price: 300 },
          { number: '003', item: '服务Z', quantity: 4, price: 150 }
        ]
      }
    ];

    // 动态生成发票
    invoiceData.forEach((invoice, index) => {
      const invoiceContainer = document.createElement('div');
      invoiceContainer.className = 'invoice-container';
      invoiceContainer.innerHTML = `
        <h1>发票</h1>
        <p>发票编号: ${invoice.number}-${index + 1}</p>
        <p>日期: ${invoice.date}</p>
        <hr>
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>项目</th>
              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
            </tr>
          </thead>
          <tbody id="invoiceTableBody${index}"></tbody>
        </table>
        <hr>
        <p><strong>总计:</strong> <span id="total${index}">0.00</span></p>
      `;

      const tableBody = invoiceContainer.querySelector(`#invoiceTableBody${index}`);
      let total = 0;
      invoice.items.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${item.number}</td>
          <td>${item.item}</td>
          <td>${item.quantity}</td>
          <td>${item.price.toFixed(2)}</td>
          <td>${(item.quantity * item.price).toFixed(2)}</td>
        `;
        tableBody.appendChild(row);
        total += item.quantity * item.price;
      });

      invoiceContainer.querySelector(`#total${index}`).textContent = total.toFixed(2);
      document.getElementById('invoicesContainer').appendChild(invoiceContainer);
    });

    // 添加打印按钮的事件监听器
    document.getElementById('printButton').addEventListener('click', function() {
      window.print();
    });
  </script>
</body>
</html>