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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
js处理表格对table进行修饰
May 26 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP $_SERVER详解
2009/01/16 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
python实现一次创建多级目录的方法
2015/05/15 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
python简单实现获取当前时间
2016/08/27 Python
Python之str操作方法(详解)
2017/06/19 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
创业培训计划书
2014/05/03 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
2014年统计工作总结
2014/11/21 职场文书
校友回访母校寄语
2015/02/26 职场文书
Go语言 详解net的tcp服务
2022/04/14 Golang