js打印研究整理

JS实现打印的方式

方式一：window.print()

方式二：使用html 标签<object>引入Webbrowser控件这种方式是其只兼容IE，其他浏览器不可使用，同时IE10以下的浏览器才可以使用，调用方式如下：

<body>

  <object id="WebBrowser"  classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height="0"  width="0"> </object>

</body>

<script>

  WebBrowser.ExecWB(1,1) //打开 

  WebBrowser.ExecWB(2,1) //关闭现在所有的IE窗口，并打开一个新窗口 

  WebBrowser.ExecWB(4,1) //保存网页

  //--------------- 常用 ---------------  

  WebBrowser.ExecWB(6,1) //打印 

  WebBrowser.ExecWB(7,1) //打印预览 

  WebBrowser.ExecWB(8,1) //打印页面设置 

  //------------------------------------- 

  WebBrowser.ExecWB(10,1) //查看页面属性 

  WebBrowser.ExecWB(15,1) //撤销 

  WebBrowser.ExecWB(17,1) //全选 

  WebBrowser.ExecWB(22,1) //刷新 

  WebBrowser.ExecWB(45,1) //关闭窗体无提示

</script>

方式三：采用document.execCommand(”print”)

该方式也兼容各个版本的浏览器，同window.print()一样，其启动的是打印对话框，chrome的打印对话框自带预览功能，但是IE、火狐仅仅只弹出打印设置对话框，没有预览功能。

方式四：采用JQuery插件

使用jQuery浏览插件可以很方便的进行局部打印，常用的插件有：

1)jquery.print.js 下载地址：https://github.com/DoersGuild/jQuery.print

2)jquery.print-preview.js 下载地址：https://github.com/etimbo/jquery-print-preview-plugin

这两种方式使用都很简单，1）通过$("#id").print(/options/);调用；2）通过$('#id').printArea(/options/); 其中的option可选项可以在下载地址下载下来后看示例代码，一般options不用传即可

方式五：采用浏览器打印第三方插件 比如Lodop插件

比如Lodop插件，这个挺好用，套打，局部打印都杠杠的，不过是收费的，免费的含有水印，比较蛋疼。

window.print()方法打印，所有主要浏览器都支持 print() 方法。

想要局部打印，通过jQuery插件就可以实现，现在网上有很多这样的插件，比如jqprint插件等等。也可以通过一个打印前和打印后的事件onbeforeprint、onafterprint。可以在打印前的时候重新编辑一些格式，专门送去打印，打印后又处理回来。

　　　　function window.onbeforeprint()

　　　　{ //将一些不需要打印的隐藏 }

　　　　function window.onafterprint()

　　　　{ //放开隐藏的元素 }

则可以用数据嵌套在 一个 div 里，获得 div

var printData = document.getElementById("dvData").innerHTML;

获得 div 里的所有 html 数据

window.document.body.innerHTML = printData;

//把 html 里的数据 复制给 body 的 html 数据 ，相当于重置了 整个页面的 内容

window.print(); // 开始打印

调用window.print()时，可以利用css来控制页面中的东西是否显示

1.  <style>  
2.  @media print{  
3.  .noprint{  
4.  display:none  
5.  }  
6.  }  
7.  </style>

HTML如下：

1.  <table width="757" height="174" border="0" align="center" cellpadding="0" cellspacing="0">  
2.  <tr class="noprint">  
3.  <td height="133" align="center" valign="top">  
4.  <img src="Images/top.jpg" width="757" height="133"></td>  
5.  </tr>  
6.  </table>

使用打印分页css，相当于分页符，总是在此div后分页

1.  <span style="font-family:KaiTi_GB2312;font-size:18px;"><div style="page-break-after:always"></div></span>

ps:关于page-break-after的使用：http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp 需要特别注意的是它应用于：position 值为 relative 或 static 的非浮动块级元素。当时absolute的时候是不起作用的。

2.将界面分为两个div,一个div中用于进行界面展示，另一个div进行打印填充，两个div

一个为界面展示时的样式，另一个为打印时的样式，单击打印时页面div隐藏，对另外一个div进行填充，打印方法执行完成后，页面div显示，另一个div隐藏。

用法：

1,点打印按钮弹出新窗口，把需要打印的内容显示到新窗口中，在新窗口中调用window.print()方法，然后自动关闭新窗口。如果要打印的页面排版和原web页面相差很大，采用此种方法。


1.  <!DOCTYPE html>  
2.  <html>  
3.  <head>  
4.  <meta charset="utf-8">  
5.  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
6.  <title>打印测完</title>  
7.  <meta name="description" content="">  
8.  <meta name="keywords" content="">  
9.  <link href="" rel="stylesheet">  
10.  <style>  
11.  #oDiv2 div{width: 100px;height: 100px;border:1px solid #c50000;}  
12.  </style>  
13.  </head>  
14.  <body>  
15.  <div>aaa</div>  
16.  <div id='oDiv2'><div>bbb</div></div>  
17.  <div>ccc</div>  
18.  <input type="button" value="打印" id="js_print" />  

20.  <script>  

22.  var oPrintBtn = document.getElementById("js_print");  
23.  var oDiv2 = document.getElementById("oDiv2");  
24.  oPrintBtn.onclick=function(){  
25.  var oPop = window.open('','oPop');  
26.  var str = '<!DOCTYPE html>'  
27.  str +='<html>'  
28.  str +='<head>'  
29.  str +='<meta charset="utf-8">'  
30.  str +='<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">'  
31.  str+='<style>';  
32.  str+='#oDiv2 div{width: 100px;height: 100px;border:1px solid #c50000;}';  
33.  str+='</style>';  
34.  str +='</head>'  
35.  str +='<body>'  
36.  str +="<div id='oDiv2'><div>bbb</div></div>";  
37.  str +='</body>'  
38.  str +='</html>'  

40.  oPop.document.write(str);  
41.  oPop.print();  
42.  oPop.close();  
43.  }  

45.  </script>  
46.  </body>  
47.  </html>

2.打印第三放页面不用打开该页面

<!doctype html>  <html>  
<head>  <meta http-equiv="Content-Type"  content="text/html; charset=UTF-8"  />  <title>MDN Example</title> 
 <script type="text/javascript">  
function closePrint ()  { 
document.body.removeChild(this.__container__); 
 }  
function setPrint ()  { 
 this.contentWindow.__container__ =  this;  
this.contentWindow.onbeforeunload = closePrint;
  this.contentWindow.onafterprint = closePrint;
  this.contentWindow.focus();  // Required for IE  this.contentWindow.print();
  } 

 function printPage (sURL)  {
  var oHiddFrame = document.createElement("iframe");
 oHiddFrame.onload = setPrint; oHiddFrame.style.visibility =  "hidden"; oHiddFrame.style.position =  "fixed"; oHiddFrame.style.right =  "0"; oHiddFrame.style.bottom =  "0";
 oHiddFrame.src = sURL; 
document.body.appendChild(oHiddFrame);  }  
</script>  
</head> 
 <body>  
<p><span onclick="printPage('externalPage.html');" style="cursor:pointer;text-decoration:underline;color:#0000ff;">Print external page!</span></p> 
 </body>  </html>

3，打开一个弹窗用于打印页面，打印完毕后自动关闭窗口

<!doctype html>  <html> 
 <head>  <meta http-equiv="Content-Type"  content="text/html; charset=UTF-8"  />  <title>JavaScript Window Close Example </title> 
 <script type="text/javascript"> 
 function  popuponclick()  { 
my_window = window.open('',  'mywindow',  'status=1,width=350,height=150'); my_window.document.write('<html><head><title>Print Me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); my_window.document.write('<p>When you print this window, it will close afterward.</p>'); 
my_window.document.write('</body></html>');  }  
</script>  
</head>  
<body>  <p>To try out the <code>afterprint</code> event, click the link below to open the window to print. You can also try changing the code to use <code>beforeprint</code> to see the difference.</p>
  <p><a href="javascript: popuponclick()">Open Popup Window</a></p> 
 </body>  
</html>

4.window.print()直接打印，不弹出设置打印参数的对话框

现在有两种解决方案,

(1).第一种是需要安装插件,网上下载ScriptX.cab文件

下载成功后将文件放在项目某个目录下,然后在页面body中写上:

<object id="factory" name="factory" style="display: none" classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" codebase="ScriptX.cab" viewastext></object>(记得codebase属性为ScriptX.cab文件的放置路径,是绝对路径)

把window.print()改成:factory.printing.Print(false)即可;

远程访问时需要在IE浏览器设置:

1.安全 -> 受信任的站点 -> 站点 -> 添加受信任访问站点(如果是访问远程那么是对方IP地址,例如http://192.168.172.1)

(2).第二种是无需要安装插件

首先需要在页面body中写上:

<OBJECT ID='WebBrowser' NAME="WebBrowser" WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></OBJECT>

把window.print()改成:document.getElementById("WebBrowser").ExecWB(6,2)即可;

最后记住一定需要在IE浏览器设置:

1.安全 -> 本地Intranet -> 自定义级别 - 找到ActiveX控件和插件项,选择对未标记为可安全执行的ActiveX控件初始化并执行脚本,再选择启用

2.安全 -> 受信任的站点 -> 自定义级别 - 找到ActiveX控件和插件项,选择对未标记为可安全执行的ActiveX控件初始化并执行脚本,再选择启用

3.安全 -> 受信任的站点 -> 站点 -> 添加受信任访问站点(如果是访问远程那么是对方IP地址,如果是本地则是本机IP.例如http://192.168.172.1))

http://blog.csdn.net/hdchangchang/article/details/46504417

http://blog.csdn.net/ww130929/article/details/71977187

http://blog.csdn.net/baohuan_love/article/details/49744363

https://bbs.csdn.net/topics/390978377

https://www.cnblogs.com/pijiaxiang/p/4475378.html

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 160,026评论 4赞 364
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,655评论 1赞 296
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,726评论 0赞 244
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,204评论 0赞 213
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,558评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,731评论 1赞 222
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,944评论 2赞 314
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,698评论 0赞 203
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,438评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2赞 247
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,444评论 3赞 255
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,137评论 3赞 238
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0赞 197
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2赞 276
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2赞 271