首頁 > web前端 > js教程 > window.print列印指定div指定網頁指定區域的方法_javascript技巧

window.print列印指定div指定網頁指定區域的方法_javascript技巧

WBOY
發布: 2016-05-16 16:40:29
原創
1736 人瀏覽過

第一種方法:指定不列印區域
使用CSS,定義一個.noprint的class,將不列印的內容放入這個class內。
細如下:

<style media=print type="text/css"> 
.noprint{visibility:hidden} 
</style>
登入後複製

要列印的內容。哈哈!

<p class="noprint">将不打印的代码放在这里。</p> 
<a href="javascript:window.print()" rel="external nofollow" target="_self">打印</a>
登入後複製

第二種方法:指定列印區域
把要列印的內容放入一個 span或div,然後透過一個函數列印。

<span id='div1'>把要打印的内容放这里</span> 
<p>所有内容</p> 
<div id="div2">div2的内容</div> 
<a href="javascript:printme()" rel="external nofollow" target="_self">打印</a> 
<script language="javascript"> 
function printme() 
{ document.body.innerHTML=document.getElementByIdx_x_x('div1').innerHTML+'<br/>'+document.getElementByIdx_x_x('div2').innerHTML; 
window.print(); 
} 
</script>
登入後複製

如果要列印的只是整個頁面中的一小部分,就最好採用第二種方法。

第三種方法:如果要列印的頁面排版和原web頁面相差很大,採用此種方法。點印按鈕彈出新窗口,把需要列印的內容顯示到新窗口中,在新窗口中呼叫window.print()方法,然後自動關閉新窗口。
window.print可以列印網頁,但有時候我們只希望列印特定控製或內容,該怎麼辦呢?

首先我們可以把要列印的內容放在div中,然後用下面的程式碼列印。

<html> 
<head> 
<script language="javascript"> 
function printdiv(printpage) 
{ 
var headstr = "<html><head><title></title></head><body>"; 
var footstr = "</body>"; 
var newstr = document.all.item(printpage).innerHTML; 
var oldstr = document.body.innerHTML; 
document.body.innerHTML = headstr+newstr+footstr; 
window.print(); 
document.body.innerHTML = oldstr; 
return false; 
} 
</script> 
<title>div print</title> 
</head> 

<body> 
//HTML Page 
//Other content you wouldn't like to print 
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print "> 

<div id="div_print"> 

<h1 style="Color:Red">The Div content which you want to print</h1> 

</div> 
//Other content you wouldn't like to print 
//Other content you wouldn't like to print 
</body>
</html>
登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板