网上的方法一般都是使用样式控制页面所需打印部分,于都在同一页面内控制,所以这样打出来的效果也不好看,而且也不便于控制,于是我就想到将需要打印的内容直接传到另一个页面,然后再在那个页面里进行打印操作,因为是一个新的页面,所以可以很方便去控制需要的样式,只要将所有打印的连接都用此页面进行操作就可以了,这样打出来的效果就可以完全与页面内容一样(包括样式),当然,前提是必须在IE高级设置里将“打印背景图像”一选项打开,否则只能打印前景色。
此方法最终也是调用WebBrowser控件进行的,所以还必须要求客户端IE打开“对没有标记为安全的ActiveX控件进行初始化和脚本运行”的选项,这是使用此方法的唯一一个缺点!
具体实现:
1、此方法实现其实也非常简单,主要是要先定义好要打印的区域,可以使用一个DIV包含起来,如下:
<!--
设置打印区域,ID为Content1
-->
< div id ="Content1" >
< table width ="647" height ="74" border ="0" cellpadding ="1" bgcolor ="#000000" >
< tr >
< td height ="18" bgcolor ="#0099FF" >< div align ="center" >< span class ="STYLE1" > 编号 </ span ></ div ></ td >
< td bgcolor ="#0099FF" >< div align ="center" >< span class ="STYLE1" > 姓名 </ span ></ div ></ td >
< td bgcolor ="#0099FF" >< div align ="center" >< span class ="STYLE1" > 年龄 </ span ></ div ></ td >
</ tr >
< tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr >
< tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr >
</ table >
</ div >
< div id ="Content1" >
< table width ="647" height ="74" border ="0" cellpadding ="1" bgcolor ="#000000" >
< tr >
< td height ="18" bgcolor ="#0099FF" >< div align ="center" >< span class ="STYLE1" > 编号 </ span ></ div ></ td >
< td bgcolor ="#0099FF" >< div align ="center" >< span class ="STYLE1" > 姓名 </ span ></ div ></ td >
< td bgcolor ="#0099FF" >< div align ="center" >< span class ="STYLE1" > 年龄 </ span ></ div ></ td >
</ tr >
< tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr >
< tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr > < tr >
< td height ="22" bgcolor ="#FFFFFF" >< div align ="center" > 1 </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > ssd </ div ></ td >
< td bgcolor ="#FFFFFF" >< div align ="center" > 23 </ div ></ td >
</ tr >
</ table >
</ div >
2、增加一个打印按钮:
<
input
type
="button"
value
=" 打 印 "
onclick
="OpenPrint();"
id
="Printf"
/>
3、增加JS方法:(其实就打开另一个新的打印页面)
<
script
>
// 打印方法,直接开另一新页面然后将当前页面打印区传过去
function OpenPrint()
{
window.open('Print.htm','print', 'toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
}
</ script >
// 打印方法,直接开另一新页面然后将当前页面打印区传过去
function OpenPrint()
{
window.open('Print.htm','print', 'toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
}
</ script >
4、在新建一个Print.htm页面,获取父页面的内容,并且打印出来
<!
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 >
< title ></ title >
</ head >
<!-- 要保留打印区域的样式,此页面的样式必需与父页面的一样 -->
< style type ="text/css" >
<!--
.STYLE1 {}{color: #FFFFFF}
body,td,th {}{
font-size: 12px;
}
.STYLE4 {}{color: #CC0000; font-weight: bold; }
-->
</ style >
< script >
//初始化页面大小
window.resizeTo(window.screen.availWidth,window.screen.availHeight);
window.moveTo(0,0);
</ script >
< body style ="background-color:White; background-image:url(nono.jpg); " >
<!-- 注册打印控件 -->
< object id ="WebBrowser" classid ="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height ="0" width ="0" ></ object >
<!-- 设置打印标题 -->
< div id ="title" class ="STYLE4" >
</ div >
< br />
<!-- 设置打印的内容 -->
< div id ="print" >
</ div >
< script >
//从父页面获取内容
var father = window.opener;
if(father != null)
{
pagesetup_null();
//获取父页面的标题
document.getElementById('title').innerHTML = father.title.innerHTML;
//获取父页面需要打印的内容
document.getElementById('print').innerHTML = father.Content1.innerHTML;
print();
}
function print()
{
document.all.WebBrowser.ExecWB(7,1);
window.close();
}
</ script >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title ></ title >
</ head >
<!-- 要保留打印区域的样式,此页面的样式必需与父页面的一样 -->
< style type ="text/css" >
<!--
.STYLE1 {}{color: #FFFFFF}
body,td,th {}{
font-size: 12px;
}
.STYLE4 {}{color: #CC0000; font-weight: bold; }
-->
</ style >
< script >
//初始化页面大小
window.resizeTo(window.screen.availWidth,window.screen.availHeight);
window.moveTo(0,0);
</ script >
< body style ="background-color:White; background-image:url(nono.jpg); " >
<!-- 注册打印控件 -->
< object id ="WebBrowser" classid ="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height ="0" width ="0" ></ object >
<!-- 设置打印标题 -->
< div id ="title" class ="STYLE4" >
</ div >
< br />
<!-- 设置打印的内容 -->
< div id ="print" >
</ div >
< script >
//从父页面获取内容
var father = window.opener;
if(father != null)
{
pagesetup_null();
//获取父页面的标题
document.getElementById('title').innerHTML = father.title.innerHTML;
//获取父页面需要打印的内容
document.getElementById('print').innerHTML = father.Content1.innerHTML;
print();
}
function print()
{
document.all.WebBrowser.ExecWB(7,1);
window.close();
}
</ script >
</ body >
</ html >
完成!