JS打印指定区域内容

摘要:
大多数时候,我们需要在构建系统时执行打印功能。在js中打印实际上非常简单,但这个简单的代码不能满足我们的特定需求。例如,我们需要打印的表单位于许多单词的中间,或者文本中包含一些广告或图片,这很难使用:window print()此时,我们需要按区域打印,提取要打印的内容并让打印机知道,而不是一次打印所有内容!有两种方法:第一种是区域划分方法。用特殊字符标记要打印的零件

  很多时候,我们在做系统的时候要做打印功能,打印在js中其实很简单,不过这个很简单的代码并不能满足我们的特定需求,比如我们需要打印的表单在很多文字的中间,或者文字中包含一些广告或者图片什么的,这就很难用:window.print();这时,我们就要分区域的打印,将需要打印的内容提取出来让打印机知道,而不是一股脑的全部打印!

下面是两种实现的方法:

  第一种:区域划分法。将要打印的部分用特殊的字符标记起来进行打印。这样下来还是有页眉和页脚,可以写去页眉页脚的方法放进去。JS 实现简单的页面局部打印

 1 function preview(oper) { 
 2 if (oper < 10){ 
 3 bdhtml=window.document.body.innerHTML;//获取当前页的html代码 
 4 sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域 
 5 eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域 
 6 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html 
 7 
 8 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html 
 9 window.document.body.innerHTML=prnhtml; 
10 window.print(); 
11 window.document.body.innerHTML=bdhtml; 
12 
13 }
14  else{ 
15 window.print(); 
16 } 
17 
18 } 

  使用时,将页面内要打印的内容加入中间<!--startprint1-->XXXXX<!--endprint1-->,再加个打印按纽 onclick=preview(1)

  第二中:组件法。WebBrowser是IE内置的浏览器控件,无需用户下载。

  WebBrowser控件 :
  <object WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object> //放进<body>中
  WebBrowder控件的方法 :

1 //打印
2 wb.ExecWB(6,1);
3 //打印设置
4 wb.ExecWB(8,1);
5 //打印预览
6 wb.ExecWB(7,1); 

  关于这个组件还有其他的用法,列举如下:
  wb.ExecWB(1,1) 打开
  wb.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口
  wb.ExecWB(4,1) 保存网页
  wb.ExecWB(6,1) 打印
  wb.ExecWB(7,1) 打印预览
  wb.ExecWB(8,1) 打印页面设置
  wb.ExecWB(10,1) 查看页面属性
  wb.ExecWB(15,1) 好像是撤销,有待确认
  wb.ExecWB(17,1) 全选
  wb.ExecWB(22,1) 刷新
  wb.ExecWB(45,1) 关闭窗体无提示
  但是打印是会把整个页面都打印出来的,页面里面有什么东西就打印出来,我们有时候只需要打印数据表格,这时我们就要写一个样式了。把不想打印的部份隐藏起来:
样式内容:

<style type="text/css" media=print>
.noprint...{display : none }
</style> 

  然后使用样式就可以: <p class="noprint">不需要打印的地方</p> ,代码如下:

 1 <script language="javascript">
 2 function printsetup()...{
 3 // 打印页面设置
 4 wb.execwb(8,1);
 5 }
 6 function printpreview()...{
 7 // 打印页面预览
 8 
 9 wb.execwb(7,1);
10 
11 }
12 
13 function printit()
14 ...{
15 if (confirm('确定打印吗?')) ...{
16 wb.execwb(6,6)
17 }
18 }
19 </script> 
1 <OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=0></OBJECT>
2 <input type=button name=button_print value="打印" class="noprint" onclick="javascript:printit()">
3 <input type=button name=button_setup value="打印页面设置" class="noprint" onclick="javascript:printsetup();">
4 <input type=button name=button_show value="打印预览" class="noprint" onclick="javascript:printpreview();">

  下面是去除页脚页眉的js代码,代码如下:

 1 <script>
 2 var HKEY_Root,HKEY_Path,HKEY_Key;
 3 HKEY_Root="HKEY_CURRENT_USER";
 4 HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
 5 //设置网页打印的页眉页脚为空
 6 function PageSetup_Null()
 7 {
 8 try
 9 {
10 var Wsh=new ActiveXObject("WScript.Shell");
11 HKEY_Key="header";
12 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");
13 HKEY_Key="footer";
14 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");
15 }
16 catch(e)
17 {
18 
19 }
20 }
21 //设置网页打印的页眉页脚为默认值
22 function PageSetup_Default()
23 {
24 try
25 {
26 var Wsh=new ActiveXObject("WScript.Shell");
27 HKEY_Key="header";
28 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&w&b页码,&p/&P");
29 HKEY_Key="footer";
30 Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"&u&b&d");
31 }
32 catch(e)
33 {}
34 }
35 
36 </script>

  注意有可能执行时,会出现没有效果的错误,这时原因是可能你的浏览器限制了active对象的创建,只要取消限制就好了,取消方法如下:打开你的ie浏览器internet选项—— 安全—— 自定义级别—— 把对没有标记为安全的activex控件进行初始化和脚本运行设置为启用,这样在加打印按钮的时候,只要加个事件触发就好了。

免责声明:文章转载自《JS打印指定区域内容》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇java线程管理超声波收发器T4016 R4016下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

反爬虫破解系列-汽车之家利用css样式替换文字破解方法

网站: 汽车之家:http://club.autohome.com.cn/ 以论坛为例 反爬虫措施: 在论坛发布的贴子正文中随机抽取某几个字使用span标签代替,标签内容位空,但css样式显示为所代替的文。这样不会 影响正常用户的阅读,只是在用鼠标选择的时候是选不到被替换的文字的,对爬虫则会造成采集内容不全的影响。 原理分析:   先看一下span标签的样...

js 弹出确认 取消对话框

//删除房源信息 functiondeleteHouse(){ var id=$(this).parent().parent().find(".checkbox").val(); console.log(id); //alert("确定要删除"+id+"吗?"); if(confirm('确定要删除吗?')){...

js 千分位(分转元,万转元...)

functionprice(a){ var num =Number(a); if(!num){//等于0 return num+'.00'; }else{//不等于0 num = Math.round((num)*100)/10000; num = num.toFixed(2);...

js 添加天数

//日期加上天数得到新的日期 //dateTemp 需要参加计算的日期,days要添加的天数,返回新的日期,日期格式:YYYY-MM-DD function getNewDay(dateTemp, days) { var dateTemp = dateTemp.split("-"); var nDate = new...

前端模块化详解(完整版)

前言 在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀,此时在JS方面就会考虑使用模块化规范去管理。本文内容主要有理解模块化,为什么要模块化,模块化...

JS实现整个DIV里的字号整体放大或缩小

JS实现对DIV里内容的字体方法或缩小 html代码 只写主要代码,样式可以自己写 <div class="content_sms"> 这是需要放大或缩小的内容 </div> <!--放大缩小按钮--> <div id= "bigFontSize">放大 </div> <div id...