window.print打印指定div指定網(wǎng)頁(yè)指定區(qū)域的方法
更新時(shí)間：2014年08月04日 17:09:18 投稿：whsnow
這篇文章主要介紹了window.print打印指定div指定網(wǎng)頁(yè)指定區(qū)域的方法,需要的朋友可以參考下
第一種方法：指定不打印區(qū)域
使用CSS，定義一個(gè).noprint的class，將不打印的內(nèi)容放入這個(gè)class內(nèi)。
細(xì)如下：
<style media=print type="text/css">
.noprint{visibility:hidden}
</style>
要打印的內(nèi)容。哈哈！
<p class="noprint">將不打印的代碼放在這里。</p> <a href="javascript:window.print()" rel="external nofollow" target="_self">打印</a>
第二種方法：指定打印區(qū)域
把要打印的內(nèi)容放入一個(gè) span或div，然后通過(guò)一個(gè)函數(shù)打印。
<span id='div1'>把要打印的內(nèi)容放這里</span>
<p>所有內(nèi)容</p>
<div id="div2">div2的內(nèi)容</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>
如果要打印的只是整個(gè)頁(yè)面中的一小部分，就最好采用第二種方法。
第三種方法：如果要打印的頁(yè)面排版和原web頁(yè)面相差很大，采用此種方法。點(diǎn)打印按鈕彈出新窗口，把需要打印的內(nèi)容顯示到新窗口中，在新窗口中調(diào)用window.print()方法，然后自動(dòng)關(guān)閉新窗口。
window.print可以打印網(wǎng)頁(yè)，但有時(shí)候我們只希望打印特定控件或內(nèi)容，怎么辦呢？
首先我們可以把要打印的內(nèi)容放在div中，然后用下面的代碼進(jìn)行打印。
<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>
相關(guān)文章
layui使用及簡(jiǎn)單的三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)教程
這篇文章主要給大家介紹了關(guān)于layui使用及簡(jiǎn)單的三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了js中的事件捕捉模型與冒泡模型,實(shí)例分析了js事件的執(zhí)行順序與冒泡模型的原理,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
javascript 判斷中文字符長(zhǎng)度的函數(shù)代碼
在很多時(shí)候,我們?cè)谶M(jìn)行數(shù)據(jù)提交數(shù)據(jù)庫(kù)時(shí).先會(huì)用javascript對(duì)其進(jìn)行有效性驗(yàn)證.如一個(gè)中文javascript為的length是1.但是數(shù)據(jù)庫(kù)中會(huì)占二個(gè)字節(jié).容易出錯(cuò)2012-08-08
詳解Webpack抽離第三方類庫(kù)以及common解決方案
這篇文章主要介紹了詳解Webpack抽離第三方類庫(kù)以及common解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
JavaScript 批量創(chuàng)建數(shù)組的方法
JavaScript有許多批量創(chuàng)建數(shù)組的方法，為了衡量它們的性能，我分別使用不同的方法創(chuàng)建一個(gè)長(zhǎng)度為100000的數(shù)組，且鍵和值相等，今天小編給大家分享基于js批量創(chuàng)建數(shù)組的方法，一起看看吧2017-03-03
我們?cè)?jīng)講過(guò)JS由三部分組成，其中一個(gè)部分就是BOM，用于對(duì)瀏覽器進(jìn)行操作。這篇文章我們主要來(lái)介紹BOM應(yīng)用，感興趣的朋友一起看看吧2018-02-02
本文主要介紹js仿拉勾網(wǎng)首頁(yè)穿墻廣告效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03![JScript|Event]面向事件驅(qū)動(dòng)的編程(二)--實(shí)例講解:將span模擬成超連接](http://img.jbzj.com/images/xgimg/bcimg7.png)
JScript|Event]面向事件驅(qū)動(dòng)的編程(二)--實(shí)例講解:將span模擬成超連接
JScript|Event]面向事件驅(qū)動(dòng)的編程(二)--實(shí)例講解:將span模擬成超連接...2007-01-01
JavaScript實(shí)現(xiàn)返回頂部按鈕案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)返回頂部按鈕案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
千萬(wàn)別錯(cuò)過(guò)的JavaScript?sort方法使用指南
sort方法在我們的日常開(kāi)發(fā)中是經(jīng)常使用的，sort方法一般是用來(lái)對(duì)數(shù)組進(jìn)行排序的，但是你是否知道sort方法默認(rèn)是按什么方式排序的呢？下面就和我一起來(lái)深入了解sort方法吧2023-05-05