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 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
js使用generator函数同步执行ajax任务
Sep 05 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
vue完美实现el-table列宽自适应
May 08 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
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python松散正则表达式用法分析
2016/04/29 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python爬取微信公众号文章
2018/08/31 Python
Django实现表单验证
2018/09/08 Python
Django框架表单操作实例分析
2019/11/04 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
年度考核自我鉴定
2014/02/02 职场文书
五一劳动节慰问信
2015/02/14 职场文书
政协工作总结2015
2015/05/20 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
五年级语文教学反思
2016/03/03 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers