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 面向对象编程基础:继承
Aug 21 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
js实现抽奖效果
Mar 27 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 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分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
js转义字符介绍
2013/11/05 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
JS常用知识点整理
2017/01/21 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
详解Python中的正则表达式的用法
2015/04/09 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python如何获取系统iops示例代码
2016/09/06 Python
numpy排序与集合运算用法示例
2017/12/15 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Python自动化操作实现图例绘制
2020/07/09 Python
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
庆七一活动方案
2014/01/25 职场文书
单位介绍信格式
2015/01/31 职场文书
文明礼仪主题班会
2015/08/13 职场文书