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 相关文章推荐
window.open不被拦截的实现代码
Aug 22 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 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
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python内存读写操作示例
2018/07/18 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Python内存映射文件读写方式
2020/04/24 Python
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
database面试题
2013/03/28 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
产品工艺师的岗位职责
2013/11/15 职场文书
广告学毕业生求职信
2014/01/30 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
个人汇报材料范文
2014/12/30 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
Ajax实现异步加载数据
2021/11/17 Javascript
解决redis批量删除key值的问题
2022/03/23 Redis