源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript实现点击按钮直接打印

  • 时间:2021-05-04 08:42 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript实现点击按钮直接打印
很多网站都有此功能,当浏览到底部时都会有一个打印按钮,点击打印按钮就可以完成打印功能,功能非常不错,人性化,代码非常的简单。
<a href="javascript:window.print()">编程素材网</a> 
也就是只要调用window.print()函数就可以实现打印当前页面。 但是上面的并不完美,因为有些网页上的很多内容都不需要打印,下面介绍一下如何打印页面中的指定内容。 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.1sucai.cn/" />
<title>指定被打印的内容</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">这是要被打印的内容</h1> 
</div>
<div style="Color:Red">欢迎您</div> 
<input name="print" type="button" id="bt" value="点击打印" /> 
</body> 
</html> 
特别说明:打印预览需要将代码复制到本机测试,否则会出错。 以上代码实现了打印网页指定内容的效果,下面简单介绍一下实现过程。 [b]一.实现原理:[/b] 在js代码中使用document.body.innerHTML =newstr,动态原来body中的内容替换为要打印的内容,在打印过后,在将原来的内容还原,原理就是这么简单,具体可以参阅代码注释。 [b]二.代码注释:[/b] 1.function printdiv(printpage){},声明一个控制打印的函数,参数是一个对象,这个对象中的内容将要被打印。 2.var newstr = printpage.innerHTML; ,获取要打印的内容。 3.var oldstr = document.body.innerHTML,原来body中的内容。 4. document.body.innerHTML =newstr,用将要打印的内容替换原来body中的内容。 5.window.print(),开始打印。 6.document.body.innerHTML=oldstr,再将原来body中的内容还原。 [b]三.相关阅读:[/b] 1.window.print()函数可以参阅[url=http://www.1sucai.cn/article/77588.htm]window对象的print()[/url]方法一章节。 2.onclick事件可以参阅[url=http://www.1sucai.cn/article/77590.htm]javascript的onclick事件[/url]一章节。 以上内容比较简单,并有单独的代码注释帮助大家学习js实现点击按钮就打印功能,希望本文对大家有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部