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 相关文章推荐
javascript eval和JSON之间的联系
Dec 31 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
浅析vue数据绑定
Jan 17 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 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
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
详解Python中with语句的用法
2015/04/15 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
Python变量访问权限控制详解
2019/06/29 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
新闻网站实习自我鉴定
2013/09/25 职场文书
司法所长先进事迹
2014/06/02 职场文书
本科应届生求职信
2014/08/05 职场文书
机关作风建设自查报告
2014/10/22 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
党员个人总结自评
2015/02/14 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server