WEB前端

js 调用打印机进行打印指定内容

位置:首页 > WEB前端 > js教程,2019-08-08 10:02
很多网站在底部都有一个打印按钮,点击此按钮就可以实现打印效果,代码非常的简单。<a href="javascript:window.print(
很多网站在底部都有一个打印按钮,点击此按钮就可以实现打印效果,代码非常的简单。
<a href="javascript:window.print()">IT技术学习的网站</a>
也就是只要调用window.print()函数就可以实现打印当前页面。
但是上面的并不完美,因为有些网页上的很多内容都不需要打印,下面介绍一下如何打印页面中的指定内容。

代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<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">电脑、手机、编程开发学习的IT技术网站!www.ablanxue.com</div> 
<input name="print" type="button" id="bt" value="点击打印" /> 
</body> 
</html>
以上代码实现了打印网页指定内容的效果,下面简单介绍一下实现过程。

一.实现原理:
在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中的内容还原。

TAGS:js 调用打印机

猜你喜欢

NewHot