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 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
Safari5中alert的无限循环BUG
2011/04/07 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
使用python实现strcmp函数功能示例
2014/03/25 Python
Python的Django框架使用入门指引
2015/04/15 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
详解Python pygame安装过程笔记
2017/06/05 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
python将数组n等分的实例
2019/12/02 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python super()方法原理详解
2020/03/31 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
试用期自我鉴定范文
2014/03/20 职场文书
2016党员入党决心书
2015/09/22 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript