javascript 打印模板 js 打印功能

转载

编程小达人 2023-08-28 16:49:52

文章标签 javascript 打印模板 python css js html 文章分类 JavaScript 前端开发

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中写上:

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

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

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

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

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

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

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

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