js控制web打印(局部打印)方法整理


Posted in Javascript onMay 29, 2013

首先定义css样式:

@media print { 
.noprint { display: none;color:green } 
}

对于不想打印的内容只用在标签中加上 class=noprint即可,打印的时候客户也不会看到页面任何变化。
打印时调用 window.print();

另外几种js局部打印的方法:
移花接木:
打印的时候,把需要打印的内容替换成整个body内容(用户会在打印的时候看到变化,客户体验不太好)

function preview(oper) 
......{ 
if (oper < 10)......{ 
bdhtml=window.document.body.innerHTML;//获取当前页的html代码 
sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域 
eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域 
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html 
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html 
window.document.body.innerHTML=prnhtml; 
window.print(); 
window.document.body.innerHTML=bdhtml; 
} else ......{ 
window.print(); 
} 
}

使用很简单 将页面内要打印的内容加入中间<!--startprint1-->XXXXX<!--endprint1-->
再加个打印按纽 onclick=preview(1)
-----------------------------------------
WebBrowser是IE内置的浏览器控件,无需用户下载.(未实验)
一、WebBrowser控件
<object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>

二、WebBrowder控件的方法
//打印 
WebBrowser1.ExecWB(6,1); 
//打印设置 
WebBrowser1.ExecWB(8,1); 
//打印预览 
WebBrowser1.ExecWB(7,1);

关于这个组件还有其他的用法,列举如下:
WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口
Web.ExecWB(4,1) 保存网页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印页面设置
Web.ExecWB(10,1) 查看页面属性
Web.ExecWB(15,1) 好像是撤销,有待确认
Web.ExecWB(17,1) 全选
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 关闭窗体无提示
但是打印是会把整个页面都打印出来的,页面里面有什么东西就打印出来,我们有时候只需要打印数据表格,这时我们就要写一个样式了:把不想打印的部份隐藏起来:
样式内容:
<style type="text/css" media=print> 
.noprint......{display : none } 
</style>

然后使用样式就可以:
<p class="noprint">不需要打印的地方</p>
代码如下:
<script language="javascript"> 
function printsetup()......{ 
// 打印页面设置 
wb.execwb(8,1); 
} 
function printpreview()......{ 
// 打印页面预览 
wb.execwb(7,1); 
} 
function printit() 
....{ 
if (confirm('确定打印吗?')) ......{ 
wb.execwb(6,6) 
} 
} 
</script> 
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></OBJECT> 
<input type=button name=button_print value="打印" class="noprint" onclick="javascript:printit()"> 
<input type=button name=button_setup value="打印页面设置" class="noprint" onclick="javascript:printsetup();"> 
<input type=button name=button_show value="打印预览" class="noprint" onclick="javascript:printpreview();">
Javascript 相关文章推荐
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
react build 后打包发布总结
Aug 24 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
js动态为代码着色显示行号
May 29 #Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 #Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 #Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 #Javascript
js仿百度有啊通栏展示效果实现代码
May 28 #Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 #Javascript
兼容IE和FF的图片上传前预览js代码
May 28 #Javascript
You might like
php下获取http状态的实现代码
2014/05/09 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
node中的session的具体使用
2018/09/14 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python实现网站注册验证码生成类
2017/06/08 Python
python装饰器深入学习
2018/04/06 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
如何理解python面向对象编程
2020/06/01 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
如何利用find命令查找文件
2015/02/07 面试题
精彩广告词大全
2014/03/19 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
java项目构建Gradle的使用教程
2022/03/24 Java/Android
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js