這篇文章主要介紹了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; } }); 這樣既可以實現局部選擇打印和局部不選擇打印