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

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

把自己要打印的東西用一個DIV層抱起來。例如：

複製代碼代碼如下:

<!-- 信訪事項轉辦告知單Start -->

<div id="itemVrbjForm" style="font-family:'仿宋','宋體';font-size: 18px; margin-top: 290px;" >

<div>

<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;

}

});

這樣既可以實現局部選擇打印和局部不選擇打印