JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕直接打印
很多網(wǎng)站都有此功能,當(dāng)瀏覽到底部時(shí)都會(huì)有一個(gè)打印按鈕,點(diǎn)擊打印按鈕就可以完成打印功能,功能非常不錯(cuò),人性化,代碼非常的簡(jiǎn)單。
<a href="javascript:window.print()">腳本之家</a>
也就是只要調(diào)用window.print()函數(shù)就可以實(shí)現(xiàn)打印當(dāng)前頁(yè)面。
但是上面的并不完美,因?yàn)橛行┚W(wǎng)頁(yè)上的很多內(nèi)容都不需要打印,下面介紹一下如何打印頁(yè)面中的指定內(nèi)容。
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>指定被打印的內(nèi)容</title>
<script language="javascript">
function printdiv(printpage)
{
var newstr = printpage.innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML =newstr;
window.print();
document.body.innerHTML=oldstr;
return false;
}
window.onload=function()
{
var bt=document.getElementById("bt");
var div_print=document.getElementById("div_print");
bt.onclick=function()
{
printdiv(div_print);
}
}
</script>
</head>
<body>
<div id="div_print">
<h1 style="Color:Red">這是要被打印的內(nèi)容</h1>
</div>
<div style="Color:Red">歡迎您</div>
<input name="print" type="button" id="bt" value="點(diǎn)擊打印" />
</body>
</html>
特別說(shuō)明:打印預(yù)覽需要將代碼復(fù)制到本機(jī)測(cè)試,否則會(huì)出錯(cuò)。
以上代碼實(shí)現(xiàn)了打印網(wǎng)頁(yè)指定內(nèi)容的效果,下面簡(jiǎn)單介紹一下實(shí)現(xiàn)過(guò)程。
一.實(shí)現(xiàn)原理:
在js代碼中使用document.body.innerHTML =newstr,動(dòng)態(tài)原來(lái)body中的內(nèi)容替換為要打印的內(nèi)容,在打印過(guò)后,在將原來(lái)的內(nèi)容還原,原理就是這么簡(jiǎn)單,具體可以參閱代碼注釋。
二.代碼注釋:
1.function printdiv(printpage){},聲明一個(gè)控制打印的函數(shù),參數(shù)是一個(gè)對(duì)象,這個(gè)對(duì)象中的內(nèi)容將要被打印。
2.var newstr = printpage.innerHTML; ,獲取要打印的內(nèi)容。
3.var oldstr = document.body.innerHTML,原來(lái)body中的內(nèi)容。
4. document.body.innerHTML =newstr,用將要打印的內(nèi)容替換原來(lái)body中的內(nèi)容。
5.window.print(),開始打印。
6.document.body.innerHTML=oldstr,再將原來(lái)body中的內(nèi)容還原。
三.相關(guān)閱讀:
1.window.print()函數(shù)可以參閱window對(duì)象的print()方法一章節(jié)。
2.onclick事件可以參閱javascript的onclick事件一章節(jié)。
以上內(nèi)容比較簡(jiǎn)單,并有單獨(dú)的代碼注釋幫助大家學(xué)習(xí)js實(shí)現(xiàn)點(diǎn)擊按鈕就打印功能,希望本文對(duì)大家有所幫助。
- JS實(shí)現(xiàn)瀏覽器打印、打印預(yù)覽示例
- JS調(diào)用打印機(jī)功能簡(jiǎn)單示例
- 一種基于瀏覽器的自動(dòng)小票機(jī)打印實(shí)現(xiàn)方案(js版)
- js console.log打印對(duì)像與數(shù)組用法詳解
- js如何打印object對(duì)象
- js實(shí)現(xiàn)頁(yè)面打印功能實(shí)例代碼(附去頁(yè)眉頁(yè)腳功能代碼)
- javascript 打印內(nèi)容方法小結(jié)
- js控制web打印(局部打印)方法整理
- js或jquery實(shí)現(xiàn)頁(yè)面打印可局部打印
- JS實(shí)現(xiàn)頁(yè)面打印功能
相關(guān)文章
layui關(guān)閉彈窗后刷新主頁(yè)面和當(dāng)前更改項(xiàng)的例子
今天小編就為大家分享一篇layui關(guān)閉彈窗后刷新主頁(yè)面和當(dāng)前更改項(xiàng)的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
javascript實(shí)現(xiàn)全屏頁(yè)面滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)全屏頁(yè)面滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04
JavaScript仿京東實(shí)現(xiàn)秒殺倒計(jì)時(shí)案例詳解
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),感興趣的小伙伴們可以參考一下2022-03-03
微信小程序?qū)崿F(xiàn)帶參數(shù)的分享功能(兩種方法)
本文通過(guò)兩種方法給大家介紹微信小程序?qū)崿F(xiàn)帶參數(shù)的分享,需要的朋友可以參考下2019-05-05
script標(biāo)簽中的defer和async使用技巧說(shuō)明
這篇文章主要介紹了script標(biāo)簽中的defer和async使用技巧,包含他們的下載順序和執(zhí)行順序,以及使用場(chǎng)景需要的朋友可以參考下2023-02-02

