有時候列印網站內容不需要連同佈景的頭尾一起列印出來，只要列印指定的內容區，可以用以下的js方法來實現，還能透過CSS做列印換頁設置功能。
需要於檔頭引入JS檔
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
//列印功能
function printHtml(html) {
var bodyHtml = document.body.innerHTML;
document.body.innerHTML = html;
window.print();
document.body.innerHTML = bodyHtml;
window.location.reload(); //列印輸出後更新頁面
}
function onprint() {
//去除超連結設置
$('a').each(function(index) {
$(this).replaceWith($(this).html());
});
var html = $("#printArea").html();
printHtml(html);
}
需要於檔頭引入JS檔
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
然後於佈景或模組的JS檔中貼上以下的CODE觸發列印
function printHtml(html) {
var bodyHtml = document.body.innerHTML;
document.body.innerHTML = html;
window.print();
document.body.innerHTML = bodyHtml;
window.location.reload(); //列印輸出後更新頁面
}
function onprint() {
//去除超連結設置
$('a').each(function(index) {
$(this).replaceWith($(this).html());
});
var html = $("#printArea").html();
printHtml(html);
}
其中加上了去除超連結設置，列印內容就不會出現有的沒的連結內容輸出，然後是指定列印範圍的結構
<div id="printArea" style="width: 100%; text-align: left;">
//列印內容輸出區
</div>
<button type="button" id="btnPrint" onclick="onprint()" value="print" class="btn btn-info btn-block btn-lg"> 列印訂單</button>
藍字的部分為標定列印區域，紅字的地方就是要列印輸出的內容區，這樣其他的表頭表尾不相干的東西都不會被列印出來，另外還能透過CSS來指定列印換頁功能。
第一頁內容
<div style='page-break-before: always'></div>
換頁第二頁內容
這樣就搞定了，有需要朋友參考看看!!
教學撰寫：徐嘉裕 Neil hsu
留言
張貼留言