สั่ง print preview ใน IE และ ประยุกต์กับ บราวเซอร์ อื่น
29 July 2010ตัวอย่าง ต่อไปนี้เป็นโค้ดสำหรับการสั่ง print preview ซึ่งทำงานได้เฉพาะ IE เท่านั้น แต่เราสามารถประยุกต์
เพิ่มเติม ตามตัวอย่างโค้ด ด้านล่าง สำหรับกรณี browser อื่นๆ
โค้ดตัวอย่าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>print preview</title>
<?php if($_GET['print_preview']==1){ ?>
<style type="text/css" media="all">
button#printPreview{
display:none;
}
body{
padding:10px;
}
</style>
<?php }else{ ?>
<style type="text/css" media="print">
button#printPreview{
display:none;
}
</style>
<?php } ?>
</head>
<body>
<p>ตัวอย่าง ต่อไปนี้เป็นโค้ดสำหรับการสั่ง print preview ซึ่งทำงานได้เฉพาะ IE เท่านั้น แต่เราสามารถประยุกต์<br />
เพิ่มเติม ตามตัวอย่างโค้ด ด้านล่าง สำหรับกรณี browser อื่นๆ </p>
<script type="text/javascript">
function printPreview() {
if(navigator.appName == "Microsoft Internet Explorer"){
if(!document._wb){
var obj="<object id='_wb' width='0' height='0' ";
obj+=" classid='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>";
document.body.insertAdjacentHTML(
"beforeEnd",obj
);
}
_wb.ExecWB(7,1)
}else{
var windowWidth=850;
var windowHeight=550;
var myleft=(screen.width)?(screen.width-windowWidth)*0.5:100;
var mytop=(screen.height)?(screen.height-windowHeight)*0.5:100;
var feature='left='+myleft+',top='+eval(mytop-50)+',width='+windowWidth+',height='+windowHeight+',';
feature+='menubar=yes,status=no,location=no,toolbar=no,scrollbars=yes';
window.open(window.location+'?print_preview=1','welcome',feature);
}
}
</script>
<button id="printPreview" onclick="printPreview()">Print Preview</button>
</body>
</html>
ตัวอย่าง
http://www.ninenik.com/demo/print_preview.php
อย่างไรก็ตาม IE ที่มีระบบ security สูงก็อาจไม่สามารถใช้งานได้ ให้ปรับฟังก์ชันเป็น
<script type="text/javascript">
function printPreview() {
var windowWidth=850;
var windowHeight=550;
var myleft=(screen.width)?(screen.width-windowWidth)*0.5:100;
var mytop=(screen.height)?(screen.height-windowHeight)*0.5:100;
var feature='left='+myleft+',top='+eval(mytop-50)+',width='+windowWidth+',height='+windowHeight+',';
feature+='menubar=yes,status=no,location=no,toolbar=no,scrollbars=yes';
window.open(window.location+'?print_preview=1','welcome',feature);
}
</script>
เพื่อใฃ้ในรูปแบบธรรมดา และรองรับทุกบราวเซอร์ โดยสามารถกำหนดรูปแบบที่ต้องการแสดงเมื่อทำการพิมพ์
ด้วยการเพิ่ม css style ในส่วนของ โค้ดตามตำแน่งด้านล่าง
<?php if($_GET['print_preview']==1){// กำหนดรูปแบบการพิมพ์กรณี preview popup หน้าใหม่ ?>
<style type="text/css" media="all">
button#printPreview{
display:none;
}
body{
padding:10px;
}
</style>
<?php }else{ // กำหนดรูปแบบการพิมพ์กรณี preview ผ่าน บราวเซอร์ ?>
<style type="text/css" media="print">
button#printPreview{
display:none;
}
</style>
<?php } ?>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
03 Aug 11 ใช้งาน google chart ตัวใหม่สร้าง poll อย่างง่าย อ่าน 1192 02 Oct 10 สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย อ่าน 2449 25 Sep 08 แบ่งหน้า ด้วย Code แบบง่าย อ่าน 5652 18 Oct 10 แนะนำ jwplayer สำหรับ แสดง video ในเว็บ และ jquery jwplayer อ่าน 1565 21 Aug 09 ตรึงหัวข้อ header ในตาราง table ด้วย css รองรับ Firefox และ IE อ่าน 4849 09 Sep 10 Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude อ่าน 6456 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 4439 24 Feb 09 สร้างรูปแบบข้อความ เบอร์โทร เลขที่บัตรประชาชน เวลา ด้วย javascript อ่าน 4622 07 Jul 10 เทคนิค php ดึงข้อมูล comment จาก facebook มาใช้งาน อ่าน 5322 04 Jun 09 สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย อ่าน 6958 08 Oct 08 การจัดตำแหน่ง div ให้อยู่กี่งกลาง อ่าน 5392 10 Nov 08 สร้างฟังก์ชันเขียนไฟล์ด้วย PHP อ่าน 2429 25 Sep 08 สิ่งที่เรียกว่า Selects, Properties , and Values สิ่งที่เป็นองค์ประกอบของ CSS อ่าน 2833 04 Dec 09 จัดการ Directory สร้าง ลบ เปลี่ยนชื่อ กำหนด permission ผ่าน FTP function ด้วย PHP อ่าน 1409 04 Oct 08 การติดตั้ง MySQL บน Windows อ่าน 2955 28 Oct 10 เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย อ่าน 3260 30 Sep 08 แปลงตัวแปร String เป็นค่าตัวเเลข อ่าน 2779 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 17503 11 Feb 11 แนะนำ การใช้งาน jQuery quicksearch plugin อ่าน 3018 16 Oct 08 CSS กับการตกแต่งกรอบรูปภาพ อ่าน 10633