在Web開(kāi)發(fā)過(guò)程中，打印預(yù)覽是一個(gè)非常重要的功能，它能夠?yàn)橛脩?hù)提供一個(gè)可打印版本的頁(yè)面。使用 jQuery 調(diào)用打印預(yù)覽功能非常方便，下面我們就來(lái)看一下如何實(shí)現(xiàn)。
$('button').click(function(){
var content = $('#divToPrint').html();
var printPage = window.open('', '', 'height=500,width=500');
printPage.document.write('<html><head><title>打印預(yù)覽</title></head><body>');
printPage.document.write(content);
printPage.document.write('</body></html>');
printPage.document.close();
printPage.print();
});這段代碼的意思是，當(dāng)頁(yè)面中的按鈕被點(diǎn)擊時(shí)，它會(huì)獲取一個(gè)名為“divToPrint”的容器中的 HTML 內(nèi)容，并在新窗口中打印出來(lái)。在這里，我們使用window.open()方法創(chuàng)建了一個(gè)新的空白窗口，然后將 HTML 內(nèi)容寫(xiě)入該窗口的文檔中，最后使用print()方法將其打印出來(lái)。
需要注意的是，在實(shí)際開(kāi)發(fā)中，可能會(huì)出現(xiàn)打印預(yù)覽的樣式與瀏覽器預(yù)覽不同的情況，這時(shí)開(kāi)發(fā)者就需要對(duì)打印頁(yè)面的樣式進(jìn)行調(diào)整。可以使用@media查詢(xún)來(lái)為打印樣式定義一組規(guī)則，以此實(shí)現(xiàn)樣式的調(diào)整。
@media print {
body {
font-size: 14px;
color: #000000;
background-color: #FFFFFF;
}
}以上代碼表示了一個(gè)簡(jiǎn)單的打印樣式的定義，其中@media print表示這是一組針對(duì)打印頁(yè)面的樣式規(guī)則，這些規(guī)則會(huì)在打印預(yù)覽時(shí)生效。開(kāi)發(fā)者可以通過(guò)定義不同的樣式規(guī)則來(lái)對(duì)打印預(yù)覽進(jìn)行樣式調(diào)整。