พิมพ์หน้าเว็บไซต์ ด้วยคำสั่ง print div ใน javascript

bysemicon -
0


🔍 บทนำ

ในการพัฒนาเว็บแอปพลิเคชันหรือระบบรายงาน เช่น ใบเสร็จ, ใบเสนอราคา หรือแบบฟอร์ม  มักจะมีความต้องการ “พิมพ์เฉพาะส่วน” ของหน้าเว็บ ไม่ใช่ทั้งหน้า เพื่อความสะดวกและลดความยุ่งยากในการตัดต่อข้อมูลหลังพิมพ์

ในบทความนี้ เราจะเรียนรู้วิธีการสั่งพิมพ์เฉพาะ <div> ที่ต้องการ โดยไม่ต้องรีโหลดหน้า พร้อมตัวอย่างโค้ด HTML, CSS และ JavaScript ที่ใช้งานได้จริง

🎯 เป้าหมาย

  • พิมพ์เฉพาะส่วน <div> ที่กำหนด
  • ป้องกันหน้าว่าง หรือเนื้อหาซ้อนกันขณะพิมพ์
  • ไม่ต้องเปิดหน้าใหม่ หรือโหลดใหม่
  • รองรับการพิมพ์หลายส่วนต่อเนื่อง

🛠 แนวคิดเบื้องหลัง

  1. ใช้ CSS @media print เพื่อควบคุมสิ่งที่จะแสดงเฉพาะตอนสั่งพิมพ์
  2. ใช้ JavaScript เพื่อเพิ่ม/ลบคลาส .print-target ให้กับ <div> ที่ต้องการพิมพ์
  3. ใช้ display: none ซ่อนองค์ประกอบอื่น
  4. ใช้ page-break-before เพื่อควบคุมการแบ่งหน้า (เมื่อพิมพ์หลายส่วน)

✅ ตัวอย่างโค้ดสมบูรณ์

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>พิมพ์เฉพาะ DIV โดยไม่รีโหลด</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
    * {
      font-family: "Sriracha", cursive;
    }

    .section {
      border: 1px solid #ccc;
      margin-bottom: 1em;
      padding: 1em;
    }

    @media print {
      /* ซ่อนทุกอย่างใน container ยกเว้น .print-target */
      .container > *:not(.print-target) {
        display: none !important;
      }

      .print-target,
      .print-target * {
        display: revert !important;
      }

      .print-target {
        width: 100%;
        page-break-before: always;
      }

      .print-target:first-of-type {
        page-break-before: auto;
      }
    }
  </style>
</head>
<body>
  <div class="container mt-4">

    <!-- ส่วนเนื้อหาที่ต้องการพิมพ์ -->
    <div class="section" id="printableArea1">
      <h2>เนื้อหาที่ต้องการพิมพ์ 1</h2>
      <p>เฉพาะส่วนนี้จะถูกพิมพ์</p>
    </div>
    <button class="btn btn-primary mb-3" onclick="printOnly('printableArea1')">พิมพ์ส่วนนี้</button>

    <div class="section" id="printableArea2">
      <h2>เนื้อหาที่ต้องการพิมพ์ 2</h2>
      <p>เฉพาะส่วนนี้จะถูกพิมพ์</p>
    </div>
    <button class="btn btn-dark mb-3" onclick="printOnly('printableArea2')">พิมพ์ส่วนนี้</button>

    <div class="section" id="printableArea3">
      <h2>เนื้อหาที่ต้องการพิมพ์ 3</h2>
      <p>เฉพาะส่วนนี้จะถูกพิมพ์</p>
    </div>
    <button class="btn btn-success mb-3" onclick="printOnly('printableArea3')">พิมพ์ส่วนนี้</button>

    <!-- ปุ่มพิมพ์ทั้งหมด -->
    <div class="mt-4">
      <button class="btn btn-danger" onclick="printAll()">พิมพ์ทั้งหมด</button>
    </div>

  </div>

  <script>
    function clearAllPrintTargets() {
      document.querySelectorAll('.print-target').forEach(el => el.classList.remove('print-target'));
    }

    function printOnly(divId) {
      clearAllPrintTargets();
      const el = document.getElementById(divId);
      if (el) el.classList.add('print-target');
      window.print();
    }

    function printAll() {
      clearAllPrintTargets();
      document.querySelectorAll('#printableArea1, #printableArea2, #printableArea3').forEach(el => {
        el.classList.add('print-target');
      });
      window.print();
    }
  </script>
</body>
</html>

ใส่ลายน้ำเป็นพื้นหลัง

ต้องเปิด "Print Background Graphics" ในหน้าต่าง Print ด้วย
     
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>พิมพ์เฉพาะ DIV โดยไม่รีโหลด</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');

    * {
      font-family: "Sriracha", cursive;
    }

    .section {
      border: 1px solid #ccc;
      margin-bottom: 1em;
      padding: 1em;
      background-color: white;
    }

    @media print {
      /* ซ่อนทุกอย่างใน container ยกเว้น .print-target */
      .container > *:not(.print-target) {
        display: none !important;
      }

      .print-target,
      .print-target * {
        display: revert !important;
      }

      .print-target {
        width: 100%;
        page-break-before: always;
        position: relative;

        /* ✅ ลายน้ำแบบ background image */
        background-image: url('https://semicon.github.io/img/web/logoxxx.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 300px auto;
        background-attachment: local;
      }

      .print-target:first-of-type {
        page-break-before: auto;
      }
    }
  </style>
</head>

<body>
  <div class="container mt-4">
    <!-- Section 1 -->
    <div class="section" id="printableArea1">
      <h2>เนื้อหาที่ต้องการพิมพ์ 1</h2>
      <p>เฉพาะส่วนนี้จะถูกพิมพ์</p>
    </div>
    <button class="btn btn-primary mb-3" onclick="printOnly('printableArea1')">พิมพ์ส่วนนี้</button>

    <!-- Section 2 -->
    <div class="section" id="printableArea2">
      <h2>เนื้อหาที่ต้องการพิมพ์ 2</h2>
      <p>เฉพาะส่วนนี้จะถูกพิมพ์</p>
    </div>
    <button class="btn btn-dark mb-3" onclick="printOnly('printableArea2')">พิมพ์ส่วนนี้</button>

    <!-- Section 3 -->
    <div class="section" id="printableArea3">
      <h2>เนื้อหาที่ต้องการพิมพ์ 3</h2>
      <p>เฉพาะส่วนนี้จะถูกพิมพ์</p>
    </div>
    <button class="btn btn-success mb-3" onclick="printOnly('printableArea3')">พิมพ์ส่วนนี้</button>

    <!-- Print all -->
    <div class="mt-4">
      <button class="btn btn-danger" onclick="printAll()">พิมพ์ทั้งหมด</button>
    </div>
  </div>

  <script>
    function clearAllPrintTargets() {
      document.querySelectorAll('.print-target').forEach(el => el.classList.remove('print-target'));
    }

    function printOnly(divId) {
      clearAllPrintTargets();
      const el = document.getElementById(divId);
      if (el) el.classList.add('print-target');
      window.print();
    }

    function printAll() {
      clearAllPrintTargets();
      document.querySelectorAll('#printableArea1, #printableArea2, #printableArea3').forEach(el => {
        el.classList.add('print-target');
      });
      window.print();
    }
  </script>
</body>

</html>

💡 เคล็ดลับเพิ่มเติม

  • หากต้องการพิมพ์พร้อมโลโก้บริษัท / หัวกระดาษ → ใส่ภายใน .print-target ด้วย
  • หากต้องการซ่อนไฟล์ JavaScript หรือปุ่มเฉพาะตอนพิมพ์ ให้ใช้:
css
@media print {
  .no-print {
    display: none !important;
  }
}

✅ สรุป

การพิมพ์เฉพาะบางส่วนของหน้าเว็บเป็นสิ่งที่ทำได้ง่ายมากด้วยการผสมผสานของ CSS และ JavaScript โดยไม่ต้องเปลี่ยนหน้า ไม่ต้องเปิดแท็บใหม่ และสามารถควบคุมรูปแบบการพิมพ์ได้เต็มที่

คุณสามารถนำโค้ดนี้ไปปรับใช้กับระบบของคุณ เช่น ระบบรายงาน, ระบบออกใบเสร็จ, หรือหน้าแบบฟอร์มที่ต้องการพิมพ์เฉพาะส่วนได้ทันที

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