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

@media print คือ CSS ที่ใช้สำหรับปรับแต่ง Style ให้กับ Element บนหน้าเว็บเมื่อถูกพิมพ์ออกมาบนหน้ากระดาษ คุณสามารถระบุระยะ Margin Padding สีตาราง รวมไปถึง Font ที่ใช้สำหรับการพิมพ์หน้าจอ HTML ได้โดยใช้ @media print

@media print ยังสามารถใช้เพื่อซ่อน Element ที่ไม่ต้องการใช้ถูกพิมพ์ออกมาบนหน้ากระดาษได้อีกด้วย ตัวอย่างเช่น หากคุณต้องซ่อน Header และ Footer หน้า HTML ที่จะทำการ print ได้อีกด้วย วิธีการใช้งาน @media print จะใช้งานยังไง สามารถอ่านเพิ่มเติมได้ด้านล่าง

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

วิธีเขียน 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> เลยก็ได้

<link rel="stylesheet" media="print" href="print.css" />

ตัวอย่างการซ่อน 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 คุณสามารถอ่านเพิ่มเติมได้ ที่นี่

เป็นยังไงกันบ้างคะสำหรับบทความ CSS @media print คือ วิธีใช้ window.print ปริ้น หน้าจอ HTML ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

Bootstrap CSS ตารางสวย ๆ พร้อมวิธีเปลี่ยนสีตารางด้วย jQuery

ดูเพลิน Admin - 26 ธ.ค. 65
Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

Bootstrap datepicker thai วิธีทำ datepicker php ภาษาไทย

ดูเพลิน Admin - 21 ธ.ค. 65
แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

แจกฐานข้อมูล จังหวัด อำเภอ ตำบล และ Dropdown jQuery Ajax

ดูเพลิน Admin - 23 ธ.ค. 65
Emmet คืออะไร วิธีติดตั้ง และตัวอย่างการใช้งาน

Emmet คืออะไร วิธีติดตั้ง และตัวอย่างการใช้งาน

ดูเพลิน Admin - 19 ม.ค. 66
Debug CSS @media print วิธีดีบั๊ก print preview

Debug CSS @media print วิธีดีบั๊ก print preview

ดูเพลิน Admin - 04 ม.ค. 66

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4