主页 / 网络编程 /

JavaScript实现点击按钮直接打印

网络编程 2021-07-04 21:04www.168986.cn编程入门
很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，狼蚁网站SEO优化通过本文给大家介绍JavaScript实现点击按钮就打印的代码，需要的朋友参考下

很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，代码非常的简单。

<a href="javascript:window.print()">狼蚁SEO</a>

也就是只要调用window.print()函数就可以实现打印当前页面。

上面的并不完美，因为有些网页上的很多内容都不需要打印，狼蚁网站SEO优化介绍一下如何打印页面中的指定内容。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://.jb51./" />
<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>

特别说明:打印预览需要将代码复制到本机测试，否则会出错。

以上代码实现了打印网页指定内容的效果，狼蚁网站SEO优化简单介绍一下实现过程。

一.实现原理:

在js代码中使用document.body.innerHTML =newstr，动态原来body中的内容替换为要打印的内容，在打印过后，在将原来的内容还原，原理就是这么简单，具体可以参阅代码注释。

二.代码注释:

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中的内容还原。

三.相关阅读:

1.window.print()函数可以参阅方法一章节。
2.onclick事件可以参阅一章节。

以上内容比较简单，并有单独的代码注释帮助大家学习js实现点击按钮就打印功能，希望本文对大家有所帮助。

上一篇：莱鸟介绍window.print()方法 下一篇：javascript中加var和不加var的区别 你真的懂吗

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by