快捷導航

javascript 局部頁面打印實現(xiàn)代碼

更新時間：2009年08月09日 01:13:36 作者：

Web打印有很多方式，水晶報表使用的恐怕比較多，但這東西是收費軟件，老板說不能用:(。

ie自帶的有Active控件，但火狐不支持。這里使用的是js操作dom方法對窗體指定標記內(nèi)文字進行打印，所以使用時需要定義相關(guān)的標簽及其樣式（文字大小、字體之類）。

<script type="text/javascript"> 
///*********************** 
///打印指定區(qū)域頁面 
///說明：obj–通過getElementById或其它方式獲取標簽標識，打印此obj內(nèi)的文字 
///日期：2009-8-7 
function startPrint(obj) 
{ 
var oWin=window.open("","_blank"); 
var strPrint="<h4 style='font-size:18px; text-align:center;'>打印預覽區(qū)</h4>\n"; 

strPrint=strPrint + "<script type=\"text/javascript\">\n"; 
strPrint=strPrint + "function printWin()\n"; 
strPrint=strPrint + "{"; 
strPrint=strPrint + "var oWin=window.open(\"\",\"_blank\");\n"; 
strPrint=strPrint + "oWin.document.write(document.getElementById(\"content\").innerHTML);\n"; 
strPrint=strPrint + "oWin.focus();\n"; 
strPrint=strPrint + "oWin.document.close();\n"; 
strPrint=strPrint + "oWin.print()\n"; 
strPrint=strPrint + "oWin.close()\n"; 
strPrint=strPrint + "}\n"; 
strPrint=strPrint + "<\/script>\n"; 

strPrint=strPrint + "<hr size='1′ />\n"; 
strPrint=strPrint + "<div id=\"content\">\n"; 
strPrint=strPrint + obj.innerHTML + "\n"; 
strPrint=strPrint + "</div>\n"; 
strPrint=strPrint + "<hr size='1′ />\n"; 
strPrint=strPrint + "<div style='text-align:center'><button onclick='printWin()' style='padding-left:4px;padding-right:4px;'>打 印</button><button onclick='window.opener=null;window.close();' style='padding-left:4px;padding-right:4px;'>關(guān) 閉</button></div>\n"; 
oWin.document.write(strPrint); 
oWin.focus(); 
oWin.document.close(); 
} 
</script> 

<button id="btnPrint" onclick="startPrint(document.getElementById('content'))">打印內(nèi)容</button> 
<div id="content"> 
<div style="font-size:12px;color:#333;"> 
這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容 
</div> 
</div>

下面是測試代碼：

<!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=gb2312" /> <title>打印指定區(qū)域頁面</title> <style type="text/css"> body{ font-size:12px; color:#333; } #content{ border:solid 1px #333; background:#ffc; } </style>  </head> <body> <button id="btnPrint" onclick="startPrint(document.getElementById('content'))">打印內(nèi)容</button> <div   class="ublnpf9mb"   id="content">     <div style="font-size:12px;color:#333;">     這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容這里是打印內(nèi)容     </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: