สั่งพิมพ์เอกสารเป็นหน้าๆ โดยใช้ CSS ควบคุม

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

ส่วนของ CSS

1
2
3
4
5
6
7
8
9
10

<style type="text/css">
<!--
@media print {
div.page  {
height: 100%;
margin: 0px 0px 0px 0px;
  }
}
-->
</style>

ส่วนของ Html

1
2

<div class="page">aa</div>
<div class="page">bb</div>

จากตัวอย่างจะเห็นว่า ใน CSS มีการเรียกใช้ Media Print คือการสั่งให้จัดการกับสื่อหรือ
Output ที่เป็น Printer ซึ่งเรากำหนดให้มีผลกับช่วง tag <div>
เมื่อคุณลองสั่งรัน Script แล้วสั่งพิมพ์ออกมา ก็จะเห็นว่า Printer
จะพิมพ์ออกมา 2 หน้า โดยหน้าแรกจะเป็น aa หน้า 2 จะเป็น bb

อ้างอิงจาก www.siamdev.com