การเขียน function เพื่อ print เฉพาะส่วนของ หน้าเว็บ
สำหรับในบทความนี้นะครับ หลายคนคงเคยประสบปัญหาในเรื่องการ ใช้ window.print มานะแล้วนะครับ ซึ่ง จะเป็นการ print ทั้งหน้าเว็บ ซึ่งจะรวมเอาส่วน head และ footer ของเว็บเข้าไปด้วย ทำให้ การ print นั้นไม่ค่อยจะ สวยเท่าที่ควรนะครับ
หรือจะใช้วิธีการสร้าง page ใหม่ เพื่อแสดงผลในรูปแบบ ทีเราต้องการก่อน print ก็เป็นวิธีแก้ไขที่ใช้ได้นะครับ แต่เราจะต้องเสียเวลาในการสร้าง web page ใหม่ หากมีการติดต่อกับฐานข้อมูลก็ต้อง เขียนโคดติดต่อใหม่ ต้องเสียเวลาประมวลผลอีกนั่นแหละครับ
ในบทความนี้ ผมจึงได้สร้าง javascript เพื่อทำหน้าที่ popup window แล้วนำข้อมูลจากส่วนที่ต้องการ ไปใส่ไว้ใน popup window เพื่อ print ในรูปแบบทีเราต้องการได้ โดยไม่ต้อง สร้าง webpage หรือเขียนติดต่อดาต้าเบสใหม่ นะครับ
ฟังชั่น printContentDiv
function printContentDiv(content){
var printReady = document.getElementById(content);
var txt= ‘\n\n’;if (document.getElementsByTagName != null){
var txtheadTags = document.getElementsByTagName(”head”);
if (txtheadTags.length > 0){
var str=txtheadTags[0].innerHTML;
txt += str; // str.replace(/funChkLoad();/ig, ” “);
}
}
txt += ‘\n\n’;
if (printReady != null){
txt += printReady.innerHTML;
}
txt += ‘\n\n’;
var printWin = window.open();
printWin.document.open();
printWin.document.write(txt);
printWin.document.close();
printWin.print();}
จากฟังชั่นด้านบน อธิบายได้ว่า เราจะมีการนำเอาข้อมูลที่อยู่ภายในแทก div ที่เราต้องการ ด้วย InnerHTML ไปใส่ในข้อมูลชุดใหม่ แล้วสั่ง popup เพื่อแสดงผลหน้า page ใหม่เพื่อ print นั่นเอง เนื่องจาก ในส่วน header ของ page อาจจะมีการ เรียกใช้ javascript หรือ css ต่างๆ ดังนั้นเราจึง ต้องนำ element head ไปใส่ไว้ใน popup window ด้วย เพื่อให้ ส่วนที่แสดงผล ใน body ใกล้เคียงกับ หน้า page จริงมากที่สุด
สำหรับการใช้ function นี้นะครับ ให้เรา ใส่ แทก
<div>ล้อมกรอบบริเวณที่เราต้องการจะ print นะครับ ดังตัวอย่าง
<html>
<head>
<script language=”javascript”>
<!–
function printContentDiv(content){
var printReady = document.getElementById(content);
var txt= ‘\n\n’;
if (document.getElementsByTagName != null){
var txtheadTags = document.getElementsByTagName(”head”);
if (txtheadTags.length > 0){
var str=txtheadTags[0].innerHTML;
txt += str; // str.replace(/funChkLoad();/ig, ” “);
}
}
txt += ‘\n\n’;
if (printReady != null){
txt += printReady.innerHTML;
}
txt += ‘\n\n’;
var printWin = window.open();
printWin.document.open();
printWin.document.write(txt);
printWin.document.close();
printWin.print();
}
// –>
</script>
</head>
<body>
ส่วน header<br>
<div id=”lblPrint”>ข้อความส่วนที่จะพิมพ์</div>
ส่วน footer<br>
<a href=”javascript:printContentDiv(’lblPrint’);”>พิมพ์หน้านี้</a>
</body>
</html>
ผลลัพธ์ที่ได้ คือ ข้อความที่อยู่ใน div ชื่อ lblPrint เท่านั้น
ลองทดสอบ Print แล้วไม่ได้นะคะ คลิกแล้วมัน Error on Page รบกวนแนะนำด้วยคะ ขอบคุณคะ
หวัดดีครับคุณ นุช
ที่ error เนื่องจากว่า คุณนุช copy เนื้อหาจากในเว็บไปเลยใช่มั้ยครับ พอดี ตอนผมโพสข้อมูลบทความไป มันแปลง เครื่องหมาย ” กับ ‘ ไปครับเลย Error
ดังนั้นผมได้ทำตัวอย่างไว้แล้วนะครับ ให้เข้าไป ดูตัวอย่างได้ที่ Link นี้นะครับ
http://devzonedd.homeip.net/sample_code/function_print.html
จากนั้น view source แล้ว copy ไปดูได้ครับ
สวัสดีคะ คุณ nuijang20
ใช่คะ พอดีลอง copy ทั้งหมดไปทดสอบดู แต่ก็เห็นตรงเครื่องหมาย ” กับ ‘ เหมือนกัน แต่ก็ปรับแล้วนะคะ สงสัยคงปรับไม่หมดก็เลย Error ต้องขอขอบคุณมากคะ
สวัสดีคะ คุณ nuijang20
ทดสอบแล้ว ok มากๆๆ เลยคะ แต่ติดปัญหานิดหน่อยอยากจะสอบถามเพิ่มเติมคะ
1. จำเป็นจะต้องเปิด page ใหม่ด้วยหรือคะ ถ้าไม่เปิด page ใหม่ได้หรือป่าวคะ
2. พอดีในหน้าเว็บมีในส่วนของการ search ซึ่งมีการใช้ หน้าเว็บจะไม่แสดงข้อมูลอะไรเลยคะ (เป็นหน้าว่างเปล่าๆ) แต่พอนำส่วนของ ออก สามารถใช้งานได้ปกติไม่มีปัญหา อย่างนี้ทำอย่างไรดีคะ พอดีจำเป็นต้องใช้ส่วนของการ search ด้วยคะ
ขอบคุณมากคะ
ส่ว
สวัสดีคะ คุณ nuijang20
ทดสอบแล้ว ok มากๆๆ เลยคะ แต่ติดปัญหานิดหน่อยอยากจะสอบถามเพิ่มเติมคะ
1. จำเป็นจะต้องเปิด page ใหม่ด้วยหรือคะ ถ้าไม่เปิด page ใหม่ได้หรือป่าวคะ
2. พอดีในหน้าเว็บมีในส่วนของการ search ซึ่งมีการใช้ “” หน้าเว็บจะไม่แสดงข้อมูลอะไรเลยคะ (เป็นหน้าว่างเปล่าๆ) แต่พอนำส่วนของ “” ออก สามารถใช้งานได้ปกติไม่มีปัญหา อย่างนี้ทำอย่างไรดีคะ พอดีจำเป็นต้องใช้ส่วนของการ search ด้วยคะ
ขอบคุณมากคะ
ปล.ขอโทษด้วยคะที่ต้องส่งอีกรอบ พอดีว่าใส่แล้วแต่ไม่แสดงก็เลยเพิ่มเครื่องหมาย “” เข้าไป
สวัสดีคะ คุณ nuijang20
ขอโทษคะอีกรอบ ไม่ติดคะ คำที่ต้องใส่ในวงเล็บคะ <form name=”form1″ method=”post”
การ พิมพ์เฉพาะส่วนของหน้า page มันต้องอาศัยเทคนิค หลอกเอาเท่านั้นครับ ซึ่งจำเป็นที่จะต้องสร้าง page ใหม่ขึ้นเท่านั้น
ในหลักการของ function เป็นการนำข้อมูลใน tag div ที่ต้องการจะ print ออกมาสร้างหน้าใหม่ เพื่อให้ได้ส่วนที่ต้องการจะพิมพ์จริงๆ ครับ โดยที่เราไม่ต้องไปเสียเวลานั่ง สร้าง page ใหม่จริงๆ แล้วดึงข้อมูลจากดาต้าเบสมาแสดงผล อีกครั้งเท่านั้นครับ และ function ตัวนี้ จะมีการเขียน header จาก page ต้นฉบับด้วย ซึ่งจะได้ข้อมูลที่เสมือนเราไปสร้าง page ใหม่จริงๆครับ
ทั้งนี้ ถ้าไม่ต้องการให้ page ใหม่มันใหญ่ เราก็ทำได้เพียง กำหนด ตอน popup ให้มีขนาดเล็กลงเท่านั้นครับ
ซึ่งต้องแก้ไขโคดตอน ใช้ window.open นิดนึงดังนี้ครับ
var printWin = window.open(”,”,’width=1, height=1,top=0,left=0′);
เท่านี้ก็จะไม่ดูเทอะทะ แล้วน่ะครับ
A wonderful article…. this is just what I needed to read today. Thanks for describing the way you work and how you structure your writing projects. I’ll go read that article now.