原文出自：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 | 窗口被激活后是否浮在其它窗口之上
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);