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 相关文章推荐
ajax与302响应代码测试
Oct 23 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
JavaScript私有变量实例详解
Jan 24 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
PHP无限分类的类
2007/01/02 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
js实现中文实时时钟
2020/01/15 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python实现多属性排序的方法
2018/12/05 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
滞留工资返还协议书
2014/10/19 职场文书
大班上学期个人总结
2015/02/13 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL