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

codebee

10 years ago

พิมพ์หน้าเว็บไซต์ ด้วยคำสั่ง 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>

ดูตัวอย่างการทำงาน ดูได้ที่ ตัวอย่าง javascript print div