首页 > 代码库 > js实现页面局部弹窗打印
js实现页面局部弹窗打印
原文出自：http://www.haorooms.com/post/css3media
在网页中经常看到有打印功能，点击之后，只针对特定区域进行的打印。网上看了一下，大体上有2中实现方法，一种是用css @media控制，另一种是直接用js控制。下面分别来对其进行说明一下！
一、css控制网页局部打印
关于css控制打印，css @media 参考地址：http://www.haorooms.com/post/css3media （主要是介绍Media Query方法）也引进了css2的media
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
media可以是all,也可以是print ,加入是print，那么这个css只有在打印的时候才加载。那么这样就好办了，我们可以写针对css打印的样式，有些地方在打印的时候不显示，那么直接用display：none来设置不就可以了嘛！
除了上面的这种写法之外，还可以这么写：
@media print { .noprint { display: none; }} 当你打印的时候noprint 类下面的所有内容不显示，不打印的时候显示。
举例：
<div class="noprint" > <table style="margin:0 auto;width:500px;"> <tr align="center" ><td> <object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" width="0"> </object> <input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)"> <input type="button" value="页面设置" onclick="document.all.WebBrowser.ExecWB(8,1)"> <input type="button" value="直接打印" onclick="document.all.WebBrowser.ExecWB(6,6)"> <input type="button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)"> </td></tr> </table></div>
这些内容在打印之前是显示的，当你点击打印的时候，会用上面的样式，不显示。达到了局部打印的效果！
二、js局部打印
直接上案例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js局部打印案例</title> 6 <script type="text/javascript"> 7 function doPrint() { 8 bdhtml=window.document.body.innerHTML; 9 sprnstr="<!--startprint-->"; // 打印开始标识 10 eprnstr="<!--endprint-->"; //打印结束标识 11 prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); 12 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); 13 //新打开窗口打印（需要引用原页面样式文件）14 var newWin = window.open("",‘newwindow‘,‘height=700,width=750,top=100,left=200,toolbar=no,menubar=no,resizable=no,location=no, status=no‘);15 newWin.document.write(prnhtml);16 newWin.print();17 18 //当前窗口打印19 window.document.body.innerHTML=prnhtml; 20 window.print(); 21 } 22 </script>23 </head>24 25 <body>26 <p>1不需要打印的地方</p>27 <p>2这里不要打印啊</p>28 <!--startprint--><!--注意要加上html里star和end的这两个标记~-->29 <h1>打印标题</h1>30 <p>打印内容~~</p>31 <!--endprint-->32 <button type="button" onclick="doPrint()">打印</button>33 <p>不打印的地方</p>34 <p>2</p>35 </body>36 </html>
注：
1、JS打开新窗口并填充内容的两种方式：
i、write内容
var newWin=window.open("childWindow.html");newWin.document.write("");newWin.document.write(document.getElementByIdx_x("fatherWindowTable").outerHTML);
这种方式缺点是新窗口一直处于Loading状态。
ii、innerHTML内容
var newWin=window.open("childWindow.html");newWin.onload=function(){newWin.document.title=‘childWindowTitle‘;newWin.document.getElementByIdx_x(‘childWindowId‘).innerHTML=document.getElementByIdx_x("fatherWindowTable").outerHTML;}
2、Js打开新窗口：Window.open() 方法参数：
其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。
参数 | 取值范围 | 说明
alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended | yes/no | 是否和父窗口同时关闭
directories | yes/no | Nav2和3的目录栏是否可见 height | pixel value | 窗口高度
hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键
innerHeight | pixel value | 窗口中文档的像素高度
innerWidth | pixel value | 窗口中文档的像素宽度 location | yes/no | 位置栏是否可见
menubar | yes/no | 菜单栏是否可见
outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度
outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度
resizable | yes/no | 窗口大小是否可调整 screenX | pixel value | 窗口距屏幕左边界的像素长度
screenY | pixel value | 窗口距屏幕上边界的像素长度 scrollbars | yes/no | 窗口是否可有滚动栏
titlebar | yes/no | 窗口题目栏是否可见 toolbar | yes/no | 窗口工具栏是否可见
Width | pixel value | 窗口的像素宽度 z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
js实现页面局部弹窗打印