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 27 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
js友好的时间返回函数
Aug 24 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
Vue项目打包编译优化方案
Sep 16 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
用php将任何格式视频转为flv的代码
2009/09/03 PHP
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php生成圆角图片的方法
2015/04/07 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python异步存储数据详解
2019/03/19 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
运动会方阵解说词
2014/02/12 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
工人先进事迹材料
2014/12/26 职场文书
公司放假通知怎么写
2015/04/15 职场文书
以下牛机,你有几个
2022/04/05 无线电