CSS @media print คือ วิธีใช้ window.print ปริ้น หน้าจอ HTML

วิธีเขียน CSS style @media แบบต่าง ๆ

• @media screen ใช้เขียน CSS สำหรับแสดงบนหน้าจอ
• @media print ใช้เขียน CSS สำหรับปริ้นหน้าจอออกมา โดย CSS ในส่วนนี้ไม่มีผลกับหน้า
• @media screen, print ใช้เขียน CSS สำหรับทั้งคู่ โดยปกติไม่จำเป็นต้องระบุหากคุณต้องการกำหนด Style ให้ทั้งหน้าจอและการปริ้น

<style type = "text/css">
   <!--
      @media screen {
         p.bodyText {font-family:verdana, arial, sans-serif;}
      }

      @media print {
         p.bodyText {font-family:georgia, times, serif;}
      }
      @media screen, print {
         p.bodyText {font-size:10pt}
      }
   -->
</style>

เราสามารถเขียน Style ในหน้า HTML โดยตรงโดยเขียน CSS ใน Tag <style>...</style>

<style type = "text/css">
      @media print {
         ... CSS สำหรับพิมพ์ HTML ...
      }
</style>

หรือจะเพิ่ม Attribute media="print" ใน Tag <link> เลยก็ได้

ตัวอย่างการซ่อน Element ที่ไม่ต้องการด้วย @media print

ตัวอย่างด้านล่าง คือ เราต้องซ่อน Header, Footer, และ class left-sidebar เมื่อทำการ Print HTML

@media print {
    header,footer,.left-sidebar{
        display: none;
    }
}

ตั้งค่าหน้ากระดาษด้วย @page

เราสามารถกำหนดระยะขอบกระดาษ และกำหนดขนาดกระดาษ โดยใช้ CSS ได้ด้วยเช่นกัน โดยตัวอย่าง เราจะกำหนด ขอบกระดาษที่ 1cm และตั้งขนาดกระดาษเป็น A4 แนวตั้ง

@media print {
    @page {
        margin: 1cm;
        size: A4 landscape;
    }
}

สำหรับเบราเซอร์ที่ไม่รองรับ @page สามารถเขียน CSS ปกติกำหนด width และ height ให้กับ html, body ได้โดยตรงเพื่อกำหนดระยะและขนาดกระดาษ

ตัวอย่างการใช้งาน window.print()

เราสามารถพิมพ์หน้า HTML อย่างง่าย โดยใช้ window.print() โดยจะใช้ร่วมกับ onclick="..." โดยคำสั่ง onclick สามารถใช้ร่วมกับ Element ได้หลายแบบตามตัวอย่างด้านล่าง

<button class="btn btn-outline-secondary" onclick="window.print()">Print Table</button>

<a class="action primary" onclick="window.print()">Print shoping Label</a>

<span class="btn btn-primary" onclick="window.print()">Print this page</span>

ส่วนวิธี Debug CSS @media print วิธีดีบั๊ก print preview คุณสามารถอ่านเพิ่มเติมได้ ที่นี่