javaScript实现点击按钮直接打印

最新推荐文章于 2023-02-02 10:50:40 发布

weixin_30823227

最新推荐文章于 2023-02-02 10:50:40 发布

阅读量470

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/carriezhao/p/6945194.html

版权

很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，代码非常的简单。
一、只要调用window.print()函数就可以实现打印当前页面
<a href="javascript:window.print()">脚本之家</a>
二、如何打印页面中的指定内容
 
  <!DOCTYPE html> 
 
  <html> 
 
  <head> 
 
  　　<meta charset= 
  " utf-8" 
  > 
 
  　　<meta name= 
  "author" 
  content= 
  "http://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> 
 
   三、还有一点，就是CSS样式表的问题了，打印的效果是不包含背景的打印的，设置时注意一下。 
 
   <style media="print">、<link media="print">的用法合理应用，media="print"是不被网页所显示的，只能在打印的效果上存在，可以设置出打印效果和在网页上所显示的不一样。

转载于:https://www.cnblogs.com/carriezhao/p/6945194.html

weixin_30823227

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript实现点击按钮直接打印

很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，代码非常的简单。一、只要调用window.print()函数就可以实现打印当前页面<a href="javascript:window.print()">脚本之家</a>二、如何打印页面中的指定内容<!DOCTYPE html>...
复制链接

扫一扫