今天我們來談談如何使用Jquery調取打印機來實現頁面換頁的功能。
首先,我們需要在HTML中引入Jquery庫:
<script src="http://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
然后,在頁面中需要打印的部分中插入以下代碼:
<div id="printContent">
<p>第一頁內容</p>
<p>第二頁內容</p>
<p>第三頁內容</p>
<p>第四頁內容</p>
</div>
接下來,我們需要添加一個按鈕觸發打印事件,并在JS文件中編寫打印事件的代碼。
<div>
<button id="printBtn">打印</button>
</div>
<script>
$('#printBtn').on('click', function() {
var content = $('#printContent').html();
var winPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
winPrint.document.write(content);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
});
</script>
這里的代碼可以將需要打印的內容寫入一個新開的窗口中(winPrint),然后在窗口中調用打印事件,最后關閉窗口。
但是,這樣只能將所有內容一次性打印出來,無法實現頁面換頁的效果。為了實現頁面換頁,我們需要將內容分頁,并在每一頁的結尾插入一個分頁符。
var content = $('#printContent').html();
content = content.replace(/\n/g, '<br/>');
var pages = content.split('<div class="page-break"></div>');
for (var i = 0; i < pages.length; i++) {
var winPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
winPrint.document.write(pages[i]);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
這里的代碼將換行符替換成<br/>標簽,然后根據<div class="page-break"></div>標簽將內容分為不同的頁面。
最后,我們只需要在需要換頁的地方添加<div class="page-break"></div>標簽就可以實現頁面換頁了。
上一篇css怎么把文字分散
下一篇jquery貪吃蛇難不難