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

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

Javascript: 一个简单的收缩菜单效果; HTML-CSS群中单选引发的“事件”; 打开超链需要“确认”对话框的方法; 用js实现网页上模仿桌面右键菜单; 可以文本显示的公告栏的js代码; [原创]js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结; 极致之美：百行代码实现全新智能语言; 表单(FORM)的一些实用效果代码; [原创]提供复制本站内容时出现,该文章转自等字样的js代码; javascript中巧用“闭包”实现程序的暂停执行功能; 给网站上的广告“加速”显示的方法; [原创]jser必看的破解javascript各种加密的反向思维方法; 用javascript代替marquee的滚动字幕效果代码; 静态页面下用javascript操作ACCESS数据库(读增改删)的代码; [原创]由亿起发(eqifa.com)的页面发现顶部的http://16a.us/8.js想到的js解密; [原创]站长必须要知道的javascript广告代码; js defineSetter -给js的 "class"自动增加一个set的属性(方法); Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例; WordPress 插件：CoolCode使用方法与下载; 文档处理系列：随时更新

No. « ‹ 181 182 183 184 › »

技术文章搜索

关键字

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

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

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