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局部打印

直接上案例：

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>js局部打印案例</title>

 <script type="text/javascript">

     function doPrint() {

         bdhtml=window.document.body.innerHTML;

         sprnstr="<!--startprint-->"; // 打印开始标识

         eprnstr="<!--endprint-->";   //打印结束标识

         prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);

         prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));

 　　　　//新打开窗口打印（需要引用原页面样式文件）

   　　  var newWin = window.open("",'newwindow','height=700,width=750,top=100,left=200,toolbar=no,menubar=no,resizable=no,location=no, status=no');

     　　newWin.document.write(prnhtml);

     　　newWin.print();

    　　　//当前窗口打印

         window.document.body.innerHTML=prnhtml;

         window.print();

 }

 </script>

 </head>

 <body>

 <p>1不需要打印的地方</p>

 <p>2这里不要打印啊</p>

 <!--startprint--><!--注意要加上html里star和end的这两个标记~-->

 <h1>打印标题</h1>

 <p>打印内容~~</p>

 <!--endprint-->

 <button type="button" onclick="doPrint()">打印</button>

 <p>不打印的地方</p>

 <p>2</p>

 </body>

 </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() 方法参数：

3、禁用/清除window.open缓存：

i、在Asp页面首部加入
   Response.Buffer   =   True
   Response.ExpiresAbsolute   =   Now()   -   1
   Response.Expires   =   0
   Response.CacheControl   =   "no-cache"
   Response.AddHeader   "Pragma",   "No-Cache"
ii、在HtML代码中加入
   <HEAD>
   <META   HTTP-EQUIV="Pragma"   CONTENT="no-cache">
   <META   HTTP-EQUIV="Cache-Control"   CONTENT="no-cache">
   <META   HTTP-EQUIV="Expires"   CONTENT="0">
   </HEAD>
iii、在重新调用原页面的时候在给页面传一个参数
   Href="****.asp?random()"
iv、xxx.aspx.cs中:
   Context.Response.Cache.SetCacheability(HttpCacheability.NoCache);