พิมพ์หน้าเว็บไซต์ ด้วยคำสั่ง print div ใน javascript
พิมพ์หน้าเว็บไซต์ ด้วยคำสั่ง print div ใน javascript
ในการพัฒนาเว็บไซต์ในปัจจุบัน โดยเฉพาะการพัฒนาเว็บไซต์ให้กับธุรกิจที่จำเป็นต้องออกเอกสารต่าง ๆ เช่นใบ ใบแจ้งหนี้ ( Invoice ) ใบเสนอราคา ( Quotation ) ธุรกิจที่ต้องออกเอกสารหรือพิมพ์เอกสารเหล่านี้อยู่เป็นประจำ การทำเว็บไซต์ให้ครอบคุมถึงการพิพม์เอกสารเหล่านี้ โดยที่เนื้อหาในเอกสารสามารถจัดการแบบ Dynamic Content ได้ เป็น
เรื่องจำเป็นและสร้างความได้เปรียบให้กับธุรกิจนั้น ๆ และอาจจะรวมไปถึง การลดต้นทุนและขั้นตอนการผลิตได้เลยทีเดียว วันนี้ลองมาดูกันครับว่า เราจะสามารถสั่งพิมพ์หน้าเว็บไซต์ที่แสดงข้อมูลเอกสารดังที่กล่าวไว้ข้างต้นด้วยภาษา javascript และ CSS ด้วยวิธีไหนและเขียนโปรแกรมอย่างไร
ตัวอย่างไฟล์ html สำหรับพิมพ์
เนื้อหาในไฟล์ .html สำหรับพิมพ์นั้น ควรจะถูกจัดอยู่ในตารางหรือแท็ก table และครอบด้วย div สำหรับเป็นตัวกำหนดพื้นที่การพิมพ์ ตัวอย่างเช่น ให้เราสร้างไฟล์ชื่อว่า invoice.html และเขียนโค๊ด html ตัวอย่างดังนี้
invoice.html
<div id="container"> <table> <tr> <th>สินค้า</th> <th>รายละเอียด</th> <th>จำนวน</th> <th>ราคา</th> </tr> <tr> <td>iPhone 7s</td> <td>OLED Display 2016</td> <td>2</td> <td>37,000THB</td> </tr> </table> </div>
สร้างไฟล์ print.css
ไฟล์ print.css จะเป็นตัวกำหนดหน้าตาเนื้อหาภายในกระดาษส่วนที่เราต้องการจะให้แสดงและส่วนเอาส่วนที่เราไม่ต้องการให้แสดงบนหน้ากระดาษออกไป ตัวอย่างเช่น
print.css
@media print { body {-webkit-print-color-adjust: exact;} // กำหนดให้สีในหน้าเว็บสามารถพิมพ์ได้อย่างถูกต้อง .hideWhenPrint { // เนื้อหาในคลาส hideWhenPrint จะถูกปิดตาทิ้งไปเมื่อพิมพ์บนกระดาษ display: none; } }
ตัวอย่างคำสั่ง javascript สำหรับพิมพ์
ในภาษา javascript นั้นเราสามารถใช้คำสั่ง window.print() เพื่อพิมพ์หน้าเว็บไซต์นั่น ๆ ได้เลย เพียงแค่กำหนดชื่อ id ของ div ที่ครอบพื้นที่ ที่เราต้องการจะพิมพ์ ตัวอย่างเช่น
function PrintDiv() { var divToPrint = document.getElementById('container'); // เลือก div id ที่เราต้องการพิมพ์ var html = '<html>'+ // '<head>'+ '<link href="css/print.css" rel="stylesheet" type="text/css">'+ '</head>'+ '<body onload="window.print(); window.close();">' + divToPrint.innerHTML + '</body>'+ '</html>'; var popupWin = window.open(); popupWin.document.open(); popupWin.document.write(html); //โหลด print.css ให้ทำงานก่อนสั่งพิมพ์ popupWin.document.close(); }
เราสามารถสั่งพิมพ์หน้าเว็บนั้น ๆ ด้วยการเรียกใช้ฟังก์ชั่น PrintDiv() ตัวอย่างเช่น
<a onClick="PrintDiv();">พิมพ์หน้านี้</a>