DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JS實現局部選擇打印和局部不選擇打印
JS實現局部選擇打印和局部不選擇打印
編輯:JavaScript綜合知識     

 這篇文章主要介紹了JS選擇打印內容,主要是把自己要打印的東西用一個DIV層抱起來,需要的朋友可以參考下

由於項目的需要在一個頁面中選擇打印內容。    把自己要打印的東西用一個DIV層抱起來。例如:  代碼如下: <!-- 信訪事項轉辦告知單Start -->  <div id="itemVrbjForm" style="font-family:'仿宋','宋體';font-size: 18px; margin-top: 290px;" >  <div style="width: 600px; margin:0 auto;">  <div style="float: right;margin-top: -40px;">(告知單編號:${zjxfItemUser.acceptedNo })</div>  <div id="title" style="margin-top: 40px;" ><span>信訪事項轉辦告知單</span></div>  ${zjxfItemUser.userName }:(信訪人名稱)<br/>            <span id="itemVrbjTime"></span>,本機關(或單位)依法受理了你(或你們)提出的${zjxfItemUser.subject }信訪事項,  該信訪事項屬於XXX職權范圍內的事項,根據《信訪條例》的有關規定,本機關已於XXXX年XX月XX日將有關材料轉交給XXX處理,請及時與其聯系。<br/>           特此告知。<br />  <div style="margin-top:50px;margin-right: 20px;float: right;">(蓋${zjxfProcessOver.subOrgname }專用章或公章)</div>  <div style="margin-top:90px;margin-right: -190px;float: right;"><span id="itemVrbjEndTime"></span></div>  </div>  </div>  <!-- 信訪事項轉辦告知單End -->    中間有不需要打印了,也用一個DIV層包含起來。利用CSS樣式中的。在不需要打印的層中引用class="noprint"就搞定了  代碼如下: <style type="text/css" media="print">  .noprint{visibility: none;}  </style>    JS代碼:    注意:在選擇打印的時候樣式會丟失,需要在打印之前加上你的打印即可。   代碼如下: $(function(){    $("#print").click(function(){    var html = window.document.body.innerHTML;    exportCSS("itemVrbjForm",html);    });    //導入樣式到選擇打印中  function exportCSS(formName,htmlInfo){  var CSS = "<link href=""+ baseURL +"/zjxf/common/css/common.css" type="text/css" rel="stylesheet" /> " +  "<link href=""+ baseURL +"/zjxf/common/css/table.css" type="text/css" rel="stylesheet" /> " +  "<link href=""+ baseURL +"/zjxf/common/css/form.css" type="text/css" rel="stylesheet" />" +  "<link href=""+ baseURL +"/zjxf/common/css/tab.css" type="text/css" rel="stylesheet" />" +  "<link href=""+ baseURL +"/zjxf/common/css/print.css" type="text/css" rel="stylesheet" />" ;  $(CSS).appendTo("#" + formName);  window.document.body.innerHTML = $("#" + formName).html();  window.print();  window.document.body.innerHTML = htmlInfo;  }    });    這樣既可以實現局部選擇打印和局部不選擇打印   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved