สร้าง Invoice (ใบแจ้งหนี้) ที่พิมพ์ได้เฉพาะส่วน โดยใช้ div

bysemicon -
0

 


✅ คุณสมบัติของ Invoice นี้

  • ใช้ HTML + Bootstrap 5
  • มีการแสดงโลโก้, รายละเอียดบริษัท, ลูกค้า, ตารางสินค้า
  • มีปุ่ม "พิมพ์ใบแจ้งหนี้"
  • ใช้ CSS @media print ซ่อนทุกอย่างที่ไม่เกี่ยวข้อง
  • รองรับลายน้ำแบบ background image
  • ใช้ div พิมพ์เฉพาะส่วน

✅ โค้ด HTML 

html
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>Invoice ตัวอย่าง</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: "Sriracha", cursive;
    }

    .invoice-box {
      max-width: 800px;
      margin: auto;
      padding: 30px;
      border: 1px solid #eee;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
      background: white;
      position: relative;
    }

    .invoice-box h1 {
      font-size: 36px;
    }

    .watermark-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300px;
      opacity: 0.05;
      transform: translate(-50%, -50%);
      z-index: 0;
      pointer-events: none;
    }

    @media print {
      body * {
        visibility: hidden;
      }

      .print-area, .print-area * {
        visibility: visible;
      }

      .print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
      }

      .no-print {
        display: none !important;
      }
    }
  </style>
</head>
<body>

  <div class="container mt-4">

    <!-- ปุ่มพิมพ์ -->
    <div class="text-end mb-3 no-print">
      <button class="btn btn-primary" onclick="printInvoice()">พิมพ์ใบแจ้งหนี้</button>
    </div>

    <!-- ใบแจ้งหนี้ -->
    <div class="invoice-box print-area" id="invoiceArea">
      <img src="https://semicon.github.io/img/logo2small.png" class="watermark-bg" alt="ลายน้ำ">

      <div class="row">
        <div class="col-6">
          <h2>บริษัท สมมุติ จำกัด</h2>
          <p>123/45 ถนนตัวอย่าง<br>เขตเมือง กรุงเทพฯ 10110<br>โทร: 02-123-4567</p>
        </div>
        <div class="col-6 text-end">
          <h1>ใบแจ้งหนี้</h1>
          <p>วันที่: 8 ส.ค. 2025<br>เลขที่: INV-0001</p>
        </div>
      </div>

      <hr>

      <div class="row mb-4">
        <div class="col-6">
          <h5>ลูกค้า:</h5>
          <p>คุณสมชาย ใจดี<br>789/12 ซอยสุขใจ<br>กรุงเทพฯ 10100</p>
        </div>
        <div class="col-6 text-end">
          <h5>ชำระเงินภายใน:</h5>
          <p>7 วัน</p>
        </div>
      </div>

      <table class="table table-bordered">
        <thead class="table-light">
          <tr>
            <th>ลำดับ</th>
            <th>รายการ</th>
            <th class="text-end">จำนวน</th>
            <th class="text-end">ราคา/หน่วย</th>
            <th class="text-end">รวม</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>สินค้า A</td>
            <td class="text-end">2</td>
            <td class="text-end">฿1,000</td>
            <td class="text-end">฿2,000</td>
          </tr>
          <tr>
            <td>2</td>
            <td>สินค้า B</td>
            <td class="text-end">1</td>
            <td class="text-end">฿500</td>
            <td class="text-end">฿500</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="4" class="text-end">รวมทั้งสิ้น</th>
            <th class="text-end">฿2,500</th>
          </tr>
        </tfoot>
      </table>

      <p class="mt-4">ขอบคุณที่ใช้บริการของเรา</p>
    </div>
  </div>

  <script>
    function printInvoice() {
      window.print();
    }
  </script>

</body>
</html>

✅ โค้ด HTML แบบสมบูรณ์ (Invoice หลายหน้า):


<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ใบแจ้งหนี้หลายหน้า</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      font-family: 'Sarabun', sans-serif;
      padding: 20px;
    }

    .invoice {
      border: 1px solid #ccc;
      padding: 30px;
      margin-bottom: 30px;
      position: relative;
    }

    table th, table td {
      vertical-align: middle !important;
    }

    @media print {
      body * {
        visibility: hidden;
      }

      .print-area, .print-area * {
        visibility: visible;
      }

      .print-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }

      .page-break {
        page-break-after: always;
      }

      .invoice {
        page-break-inside: avoid;
      }

      button {
        display: none !important;
      }
    }
  </style>
</head>
<body>

  <div id="invoiceContainer" class="print-area">

    <!-- ใบแจ้งหนี้ (สามารถมีหลายใบ) -->
    <div class="invoice">
      <h2>ใบแจ้งหนี้ #INV001</h2>
      <p>วันที่: 2025-08-08</p>
      <p>ลูกค้า: บริษัท สมมุติ จำกัด</p>

      <table class="table table-bordered">
        <thead class="table-light">
          <tr>
            <th>#</th>
            <th>รายการ</th>
            <th>จำนวน</th>
            <th>ราคา/หน่วย</th>
            <th>รวม</th>
          </tr>
        </thead>
        <tbody>
          <!-- สร้างรายการแบบเยอะเพื่อทดสอบหลายหน้า -->
          <!-- คุณสามารถใช้ loop ใน backend เพื่อแสดงรายการจริง -->
          <!-- ตัวอย่างรายการจำนวนมาก -->
          <script>
            for (let i = 1; i <= 40; i++) {
              document.write(`
                <tr>
                  <td>${i}</td>
                  <td>สินค้า ${i}</td>
                  <td>1</td>
                  <td>100.00</td>
                  <td>100.00</td>
                </tr>
              `);
            }
          </script>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4" class="text-end">รวมทั้งหมด</td>
            <td>4,000.00</td>
          </tr>
        </tfoot>
      </table>
    </div>

  </div>

  <div class="text-center">
    <button class="btn btn-primary" onclick="window.print()">พิมพ์ใบแจ้งหนี้</button>
  </div>

</body>
</html>


✅ จุดเด่น:

  • ใช้ @media print จัดรูปแบบสำหรับการพิมพ์
  • รองรับรายการหลายรายการ กระจายหลายหน้าโดยอัตโนมัติ (ด้วย page-break-inside: avoid)
  • มีปุ่มสั่งพิมพ์เฉพาะใบแจ้งหนี้


Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า