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