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

<h3>พิมพ์หน้าเว็บไซต์ ด้วยคำสั่ง print div ใน javascript<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>พิมพ์หน้าเว็บไซต์ ด้วยคำสั่ง print div ใน javascript<&sol;strong><br &sol;>&NewLine;ในการพัฒนาเว็บไซต์ในปัจจุบัน โดยเฉพาะการพัฒนาเว็บไซต์ให้กับธุรกิจที่จำเป็นต้องออกเอกสารต่าง ๆ เช่นใบ ใบแจ้งหนี้ &lpar; Invoice &rpar; ใบเสนอราคา &lpar; Quotation &rpar; ธุรกิจที่ต้องออกเอกสารหรือพิมพ์เอกสารเหล่านี้อยู่เป็นประจำ การทำเว็บไซต์ให้ครอบคุมถึงการพิพม์เอกสารเหล่านี้ โดยที่เนื้อหาในเอกสารสามารถจัดการแบบ Dynamic Content ได้ เป็น<&excl;--more--><&sol;p>&NewLine;<p>เรื่องจำเป็นและสร้างความได้เปรียบให้กับธุรกิจนั้น ๆ และอาจจะรวมไปถึง การลดต้นทุนและขั้นตอนการผลิตได้เลยทีเดียว วันนี้ลองมาดูกันครับว่า เราจะสามารถสั่งพิมพ์หน้าเว็บไซต์ที่แสดงข้อมูลเอกสารดังที่กล่าวไว้ข้างต้นด้วยภาษา javascript และ CSS ด้วยวิธีไหนและเขียนโปรแกรมอย่างไร<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ตัวอย่างไฟล์ html สำหรับพิมพ์<&sol;h4>&NewLine;<p>เนื้อหาในไฟล์ &period;html สำหรับพิมพ์นั้น ควรจะถูกจัดอยู่ในตารางหรือแท็ก table และครอบด้วย div สำหรับเป็นตัวกำหนดพื้นที่การพิมพ์ ตัวอย่างเช่น ให้เราสร้างไฟล์ชื่อว่า invoice&period;html และเขียนโค๊ด html ตัวอย่างดังนี้<&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>invoice&period;html<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;div id&equals;"container"&gt&semi; &NewLine; &lt&semi;table&gt&semi; &NewLine; &lt&semi;tr&gt&semi; &NewLine; &lt&semi;th&gt&semi;สินค้า&lt&semi;&sol;th&gt&semi; &NewLine; &lt&semi;th&gt&semi;รายละเอียด&lt&semi;&sol;th&gt&semi; &NewLine; &lt&semi;th&gt&semi;จำนวน&lt&semi;&sol;th&gt&semi; &NewLine; &lt&semi;th&gt&semi;ราคา&lt&semi;&sol;th&gt&semi; &NewLine; &lt&semi;&sol;tr&gt&semi; &NewLine; &NewLine; &lt&semi;tr&gt&semi; &NewLine; &lt&semi;td&gt&semi;iPhone 7s&lt&semi;&sol;td&gt&semi; &NewLine; &lt&semi;td&gt&semi;OLED Display 2016&lt&semi;&sol;td&gt&semi; &NewLine; &lt&semi;td&gt&semi;2&lt&semi;&sol;td&gt&semi; &NewLine; &lt&semi;td&gt&semi;37&comma;000THB&lt&semi;&sol;td&gt&semi; &NewLine; &lt&semi;&sol;tr&gt&semi; &NewLine; &lt&semi;&sol;table&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้างไฟล์ print&period;css<&sol;h4>&NewLine;<p>ไฟล์ print&period;css จะเป็นตัวกำหนดหน้าตาเนื้อหาภายในกระดาษส่วนที่เราต้องการจะให้แสดงและส่วนเอาส่วนที่เราไม่ต้องการให้แสดงบนหน้ากระดาษออกไป ตัวอย่างเช่น<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>print&period;css<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&commat;media print &lbrace; &NewLine;&Tab;body &lbrace;-webkit-print-color-adjust&colon; exact&semi;&rcub; &sol;&sol; กำหนดให้สีในหน้าเว็บสามารถพิมพ์ได้อย่างถูกต้อง &NewLine;&Tab;&period;hideWhenPrint &lbrace; &sol;&sol; เนื้อหาในคลาส hideWhenPrint จะถูกปิดตาทิ้งไปเมื่อพิมพ์บนกระดาษ &NewLine;&Tab; display&colon; none&semi; &NewLine;&Tab;&rcub; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ตัวอย่างคำสั่ง javascript สำหรับพิมพ์<&sol;h4>&NewLine;<p>ในภาษา javascript นั้นเราสามารถใช้คำสั่ง window&period;print&lpar;&rpar; เพื่อพิมพ์หน้าเว็บไซต์นั่น ๆ ได้เลย เพียงแค่กำหนดชื่อ id ของ div ที่ครอบพื้นที่ ที่เราต้องการจะพิมพ์ ตัวอย่างเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;function PrintDiv&lpar;&rpar; &lbrace; &NewLine; var divToPrint &equals; document&period;getElementById&lpar;'container'&rpar;&semi; &sol;&sol; เลือก div id ที่เราต้องการพิมพ์ &NewLine;&Tab;var html &equals; '&lt&semi;html&gt&semi;'&plus; &sol;&sol; &NewLine;&Tab;&Tab;&Tab;&Tab;'&lt&semi;head&gt&semi;'&plus; &NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;'&lt&semi;link href&equals;"css&sol;print&period;css" rel&equals;"stylesheet" type&equals;"text&sol;css"&gt&semi;'&plus; &NewLine;&Tab;&Tab;&Tab;&Tab;'&lt&semi;&sol;head&gt&semi;'&plus; &NewLine;&Tab;&Tab;&Tab;&Tab;&Tab;'&lt&semi;body onload&equals;"window&period;print&lpar;&rpar;&semi; window&period;close&lpar;&rpar;&semi;"&gt&semi;' &plus; divToPrint&period;innerHTML &plus; '&lt&semi;&sol;body&gt&semi;'&plus; &NewLine;&Tab;&Tab;&Tab;&Tab;'&lt&semi;&sol;html&gt&semi;'&semi; &NewLine;&Tab;&Tab;&Tab;&Tab; &NewLine;&Tab;var popupWin &equals; window&period;open&lpar;&rpar;&semi; &NewLine;&Tab;popupWin&period;document&period;open&lpar;&rpar;&semi; &NewLine;&Tab;popupWin&period;document&period;write&lpar;html&rpar;&semi; &sol;&sol;โหลด print&period;css ให้ทำงานก่อนสั่งพิมพ์ &NewLine;&Tab;popupWin&period;document&period;close&lpar;&rpar;&semi;&Tab; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;เราสามารถสั่งพิมพ์หน้าเว็บนั้น ๆ ด้วยการเรียกใช้ฟังก์ชั่น PrintDiv&lpar;&rpar; ตัวอย่างเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;a onClick&equals;"PrintDiv&lpar;&rpar;&semi;"&gt&semi;พิมพ์หน้านี้&lt&semi;&sol;a&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;invoicemaker&sol;ใบเสนอราคาออนไลน์&period;html" target&equals;"&lowbar;blank">ดูตัวอย่างการทำงาน ดูได้ที่ ตัวอย่าง javascript print div<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;