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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
JS 参数传递的实际应用代码分析
Sep 13 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
node中的cookie的具体使用
Sep 13 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 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中memcache 基本操作实例
2015/05/17 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php析构函数的简单使用说明
2015/08/24 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
详解python eval函数的妙用
2017/11/16 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Django 静态文件配置过程详解
2019/07/23 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
浅析Python 多行匹配模式
2020/07/24 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
应付会计岗位职责
2013/12/12 职场文书
学校后勤人员职责
2013/12/27 职场文书
经销商会议欢迎词
2014/01/11 职场文书
自荐书范文范例
2014/02/13 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
优秀团队申报材料
2014/12/26 职场文书
高中班长竞选稿
2015/11/20 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书