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 遍历对象中的子对象
Jul 03 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
javascript正则表达式总结
Feb 29 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 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读取数据库信息的几种方法
2008/05/24 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
js类型检查实现代码
2010/10/29 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
JS求平均值的小例子
2013/11/29 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
Python读取csv文件实例解析
2019/12/30 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
市场部规章制度
2014/01/24 职场文书
揠苗助长教学反思
2014/02/04 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
生日宴会策划方案
2014/06/03 职场文书
中职招生先进个人材料
2014/08/31 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
保管员岗位职责
2015/02/14 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
MySQL表字段时间设置默认值
2021/05/13 MySQL