JavaScript实现点击按钮直接打印指定页面内容

JavaScript实现点击按钮直接打印指定页面内容

许多网站都具备打印功能，通常位于页面底部，用户点击即可触发打印。这一设计既人性化又实用，且实现代码十分简洁。

<a href="javascript:window.print()">本站</a> 

实现基础打印功能只需调用window.print()函数，该函数会直接打印当前整个页面的内容。

然而，直接打印整个页面往往不够完美，因为网页中可能包含大量无需打印的冗余内容。因此，本文将介绍如何精准打印页面中的指定部分。

具体实现代码如下：

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

注意：打印预览功能需要将代码保存至本地环境运行，直接在在线编辑器中测试可能会出错。

上述代码实现了打印网页指定区域的效果，接下来简要解析其实现逻辑。

一、实现原理：

核心思路是在JavaScript中利用document.body.innerHTML = newstr语句，将页面原本的内容临时替换为需要打印的内容。打印操作完成后，再将原始内容还原。这一过程逻辑简单，具体细节可参考代码中的注释说明。

二、代码详细注释：

1. function printdiv(printpage){}：定义一个控制打印流程的函数，接收一个对象作为参数，该对象包含待打印的内容。 2. var newstr = printpage.innerHTML;：提取传入对象内部的HTML内容，作为待打印数据。 3. var oldstr = document.body.innerHTML：保存当前页面body的原始HTML内容，以便后续恢复。 4. document.body.innerHTML =newstr：用提取出的新内容替换当前页面的body内容，使页面仅显示待打印部分。 5. window.print()：触发浏览器打印对话框，执行打印操作。 6. document.body.innerHTML=oldstr：打印完成后，将body内容还原为原始状态，保持页面正常显示。

三、扩展阅读：

1. 关于window.print()函数的更多用法，可参考window对象的print()方法相关章节。 2. 关于按钮点击触发事件，可参考javascript的onclick事件相关章节。

以上内容相对简单，并配有详细的代码注释，旨在帮助读者理解并掌握JavaScript实现点击按钮打印指定内容的技巧，希望本文能对大家的学习和工作有所帮助。