JS實現局部選擇打印和局部不選擇打印

2019-11-20 20:52:29

字體：大中小

來源：轉載

供稿：網友

由于項目的需要在一個頁面中選擇打印內容。

把自己要打印的東西用一個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; 
} 

}); 