js网页打印,js打印,javascript局部打印,网页局部打印方法

在网页中经常看到有打印功能,点击之后,只针对特定区域进行的打印。网上看了一下,大体上有2中实现方法,一种是用css @media控制,另一种是直接用js控制。下面分别来对其进行说明一下!

一、css控制网页局部打印

关于css控制打印,我之前的一篇文章写过css @media,不知道大家有没有印象了~~主要是介绍Media Query方法,地址:www.haorooms.com/post/css3me...

也引进了css2的media

bash 复制代码
 <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

media可以是all,也可以是print ,加入是print,那么这个css只有在打印的时候才加载。那么这样就好办了,我们可以写针对css打印的样式,有些地方在打印的时候不显示,那么直接用display:none来设置不就可以了嘛!

除了上面的这种写法之外,还可以这么写

css 复制代码
@media print { 
.noprint { display: none; }
} 

当你打印的时候noprint 类下面的所有内容不显示,不打印的时候显示。

举例:

ini 复制代码
<div class="noprint" >  
<table style="margin:0 auto;width:500px;">  
    <tr align="center" ><td>  
      <object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0"  
                    width="0">  
      </object>  
  <input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)">  
  <input type="button" value="页面设置" onclick="document.all.WebBrowser.ExecWB(8,1)">  
<input type="button" value="直接打印" onclick="document.all.WebBrowser.ExecWB(6,6)">  
  <input type="button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)">  
    </td></tr>  
</table>
</div>  

这些内容在打印之前是显示的,当你点击打印的时候,会用上面的样式,不显示。达到了局部打印的效果!

二、js局部打印

直接上案例

xml 复制代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>haorooms js局部打印案例</title>
<script type="text/javascript">   
	function doPrint() {    
		bdhtml=window.document.body.innerHTML;    
		sprnstr="<!--startprint-->";    
		eprnstr="<!--endprint-->";    
		prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);    
		prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));    
		window.document.body.innerHTML=prnhtml; 
		window.print();    
}    
</script>
</head>

<body>
<p>1不需要打印的地方</p>
<p>2这里不要打印啊</p>
<!--startprint--><!--注意要加上html里star和end的这两个标记,之前没加,一直没效果,谁叫咱们菜呢~-->
<h1>打印标题</h1>
<p>打印内容~~</p>
<!--endprint-->
<button type="button" onclick="doPrint()">打印</button>
<p>1haorooms博客不打印的地方啊哈哈哈哈</p>
<p>2</p>
</body>
</html>

可以把上面的代码黏贴到网页中,试一试,只有做了标记的地方打印了,代码很简单,相信你也看得懂。

延伸

通过上面的案例,我们可以看到,只要我们把要打印的东西放到document.body.innerHTML中就可以了 无论是一行内容,还是图片,还是文字,只要我们把拿到的html代码,赋值给document.body.innerHTML,然后在运用window.print(); 就可以对赋值的代码进行打印了!

问题

上面的方法打印完毕之后,body的内容变掉了,不是我们想要的结果,我们可以使用一个jquery插件来实现:这个插件名字是jquery.printarea.js

使用方法:

xml 复制代码
<script src="http://www.haorooms.com/theme/assets/js/jquery.js"></script>
<script src="jquery.printarea.js"></script>
<script type="text/javascript">   
    function doPrint() {       
       $("#dayin").printArea();    
}    
</script>

<div id="dayin">
<h1>haorooms打印标题</h1>
<p>haorooms打印的文字</p>
<img src="yideng.png">
<img src="haorooms.png">
</div>

插件下载地址

关于网页打印,今天就说这么些,希望大家留言相互交流啊!

相关推荐
范文杰9 分钟前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪17 分钟前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪26 分钟前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy1 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom2 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom2 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom2 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端