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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
jQuery插件的写法分享
Jun 12 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
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
symfony表单与页面实现技巧
2015/01/26 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python中的super()方法使用简介
2015/08/14 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
python下载图片实现方法(超简单)
2017/07/21 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
初中美术教学反思
2014/01/29 职场文书
房地产推广策划方案
2014/05/19 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
2015年班组工作总结
2015/04/20 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
centos8安装MongoDB的详细过程
2021/10/24 MongoDB