javascript 局部页面打印实现代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 局部页面打印实现代码

Javascript: 一个短小精悍使用的对象化QQ菜单; 用数据岛生成翻页程序; 轻松实现删除确认; IE5中用JavaScript跨frame加option问题; IE6无提示关闭窗口，不是利用activeX; 下拉框联动; 用dhtml做了一个密码管理器; 面向对象的JavaScript编程; 网络病毒与防范措施; 破解网页禁止鼠标右键的技巧; JS编写的俄罗斯方块; 通过代码改变客户端所显示的语言类型; 欢迎精灵; 事件处理函数OnEnter OnExit 使用一例; 称三次从12球中找出唯一但不知轻重的球; VML实现的饼图（JavaScript类封装）; 搜索gb2312汉字在网上的频率; 真正的用JS 做的 loading; Vml:应用阿基米德算法在网页制作动画,原程+注释; 贴一例:当所有图片下载完毕时，然后显示网页(有进度)

No. « ‹ 6 7 8 9 › »

技术文章搜索

关键字

Javascript 中的 javascript 局部页面打印实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 81 ::

收藏到网摘: n/a

ext 代码生成器 Javascript 继承实现例子

Web打印有很多方式，水晶报表使用的恐怕比较多，但这东西是收费软件，老板说不能用:(。 ie自带的有Active控件，但火狐不支持。这里使用的是js操作dom方法对窗体指定标记内文字进行打印，所以使用时需要定义相关的标签及其样式（文字大小、字体之类）。

复制代码代码如下:

<script type="text/javascript"> 
///*********************** 
///打印指定区域页面 
///说明：obj–通过getElementById或其它方式获取标签标识，打印此obj内的文字 
///日期：2009-8-7 
function startPrint(obj) 
{ 
var oWin=window.open("","_blank"); 
var strPrint="<h4 style='font-size:18px; text-align:center;'>打印预览区</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;'>关 闭</button></div>\n"; 
oWin.document.write(strPrint); 
oWin.focus(); 
oWin.document.close(); 
} 
</script> 
<button id="btnPrint" onclick="startPrint(document.getElementById('content'))">打印内容</button> 
<div id="content"> 
<div style="font-size:12px;color:#333;"> 
这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容 
</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>打印指定区域页面</title>
<style type="text/css">
body{
font-size:12px;
color:#333;
}
#content{
border:solid 1px #333;
background:#ffc;
}
</style>
<script type="text/javascript">
///***********************
///打印指定区域页面
///说明：obj--通过getElementById或其它方式获取标签标识，打印此obj内的文字
///开发：王洪剑
///日期：2009-8-7
function startPrint(obj)
{ var oWin=window.open("","_blank"); var strPrint="<h4 style='font-size:18px; text-align:center;'>打印预览区</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;'>关 闭</button></div>\n"; oWin.document.write(strPrint); oWin.focus(); oWin.document.close();
}
</script>
</head>
<body>
<button id="btnPrint" onclick="startPrint(document.getElementById('content'))">打印内容</button>
<div id="content"> <div style="font-size:12px;color:#333;"> 这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容这里是打印内容 </div>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

ext 代码生成器 Javascript 继承实现例子

Javascript 中的 javascript 局部页面打印实现代码

评论 (0) All