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 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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内存不够用的快速解决方法
2013/10/26 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
详解用JS添加和删除class类名
2019/03/25 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
python内存管理机制原理详解
2019/08/12 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
企业管理毕业生求职信
2014/03/11 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
租房协议书范例
2014/10/14 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
标准发言稿结尾
2019/07/18 职场文书