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

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

Javascript: Dhtml:浏览大图时鼠标感应控制层滚动条的移动; 初试javascript ：贪吃蛇啊; 只让输入数字的输入框; 只能输入汉字的输入框; 在JS中定义数组删除方法; 在网页中使用realplayer播放rm文件; 用层实现为网页中的图添加水印的效果; 所见即所得编辑器 aynHTML 大全：（一）如何部署、嵌入、装载动态内容; JavaScript 收集的两个小代码！; JScript中正则表达函数的说明与应用; 网页上内容导出到word里; 关于开发在线网页编辑器按回车会输入<p>而不是<br>的解决方法; OOP In JS [JS脚本中的面向对象]; 一个很通用的javascript的下拉菜单; 将金额小写转化成汉字大写; VML Chart 控件; Js+Dhtml:WEB程序员简易开发工具包(预先体验版); Javascript实例教程(21) OLE Automation(4); javascript进行客户端数据的校验; JavaScript 小技巧(第三集)

No. « ‹ 8 9 10 11 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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