JS打印组合功能


Posted in Javascript onAugust 04, 2016

本文为大家分享了JS打印组合功能,功能全面,供大家参考,具体内容如下

1.局部打印--即想打印什么地方就打印什么地方
 解决办法:
 将不想打印的地方隐藏起来
 <style type="text/css" media=print>
.noprint{display : none }
 

分页的时候用 
.PageNext{page-break-after: always;} 
然后给不想打印的页面元素添加: class="Noprint" ,那就不会出现在打印和打印预览中了。
想分页的地方添加:  <div class="PageNext"></div> 就可以了。
</style>
在将不想打印的地方控制起来 
<p class="noprint">不需要打印的地方</p> 

2.引用组建
WebBrowser是IE内置的浏览器控件,无需用户下载. 
WebBrowser控件
<object ID='WebBrowser' WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>

关于这个组件的用法,列举如下:
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) 关闭窗体无提示

3.实例

<head>
<script language="javascript"> 
<style type="text/css" media=print>
.noprint{display : none }
</style>
function printsetup()
{ 
 // 打印页面设置 
  wb.execwb(8,1); 
} 
function printpreview(){ 
// 打印页面预览 
wb.execwb(7,1); 
} 
function printit() 
{ 
 if(confirm('确定打印吗?'))
 { 
  wb.execwb(6,6) 
 } 
} 
</script>
</head> 
<body>
<p class="noprint">
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="wb" name="wb" width="0"></OBJECT> 
<input type="button" name="button_print" value="打印" onclick="javascript:printit()" /> 
<input type="button" name="button_setup" value="打印页面设置" onclick="javascript:printsetup();" /> 
<input type="button" name="button_show" value="打印预览" onclick="javascript:printpreview();" /> 
</p>
</body>

3.JS 实现简单的页面局部打印

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); //从开始代码向后取htm
 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)

 4、控制"纵打"、 横打”和“页面的边距。
(1)<script defer>

function SetPrintSettings() { 
 // -- advanced features 
 factory.printing.SetMarginMeasure(2) // measure margins in inches 
 factory.SetPageRange(false, 1, 3) // need pages from 1 to 3 
 factory.printing.printer = "HP DeskJet 870C" 
 factory.printing.copies = 2 
 factory.printing.collate = true 
 factory.printing.paperSize = "A4" 
 factory.printing.paperSource = "Manual feed" 

 // -- basic features 
 factory.printing.header = "This is MeadCo" 
 factory.printing.footer = "Advanced Printing by ScriptX" 
 factory.printing.portrait = false 
 factory.printing.leftMargin = 1.0 
 factory.printing.topMargin = 1.0 
 factory.printing.rightMargin = 1.0 
 factory.printing.bottomMargin = 1.0 
} 
</script> 

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); //从开始代码向后取htm
 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) 

更多关于js打印功能的内容,点击《js打印功能汇总》专题学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
JavaScript中的History历史对象
Jan 16 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 #Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 #Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 #Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 #Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 #Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 #Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 #Javascript
You might like
开源SNS系统-ThinkSNS
2008/05/18 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
python 进程池pool使用详解
2020/10/15 Python
如何用Python徒手写线性回归
2021/01/25 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
汽车专业学生自我评价
2014/01/19 职场文书
考试违纪检讨书
2014/02/02 职场文书
环卫处个人工作总结
2015/03/04 职场文书
初中语文教师研修日志
2015/11/13 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
Python使用openpyxl批量处理数据
2021/06/23 Python