js實現頁面局部彈窗列印

最後更新：2016-09-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

原文出自：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() 方法參數：

js實現頁面局部彈窗列印

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

js實現頁面局部彈窗列印

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support