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 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
小程序实现侧滑删除功能
Jun 25 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具体实现代码
2010/10/12 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
window.open的功能全解析
2006/10/10 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
easyui validatebox验证
2016/04/29 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue.js实现简单购物车功能
2020/05/30 Javascript
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
python爬虫使用cookie登录详解
2017/12/27 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
python cs架构实现简单文件传输
2020/03/20 Python
Python高斯消除矩阵
2019/01/02 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python numpy中cumsum的用法详解
2019/10/17 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
python 实用工具状态机transitions
2020/11/21 Python
关爱留守儿童标语
2014/06/18 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
联村联户简报
2015/07/21 职场文书
实习感想范文
2015/08/10 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
关于Python使用turtle库画任意图的问题
2022/04/01 Python