js实现页面局部弹窗打印

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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实现页面局部弹窗打印的主要内容,如果未能解决你的问题,请参考以下文章

js或jquery实现页面打印可局部打印

JavaScript 弹窗类的实现

小程序各种功能代码片段整理---持续更新

js实现局部打印及其打印预览

js利用window.print实现局部打印方法

js到一定时间进行弹窗提示,确定到分