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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
PHP下几种删除目录的方法总结
2007/08/19 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
Python制作词云的方法
2018/01/03 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
python 元组和列表的区别
2020/12/30 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
介绍一下linux文件系统分配策略
2012/11/17 面试题
创业计划书的内容步骤和要领
2014/01/04 职场文书
公务员综合考察材料
2014/02/01 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
升职感谢信
2015/01/22 职场文书
司机岗位职责
2015/02/04 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
Python的property属性详细讲解
2022/04/11 Python