当前位置: 爱符号 - 所有分类 - Web开发 - js - javascript打印网页,自定义区域
javascript打印网页,自定义区域 javascriptDaYinWangYe,ZiDingYiQuYu
符号空间 发表于:2012-09-25 18:48:19 阅读(1269)
关键词:javascript javascript 打印网页 打印网页 自定义 自定义
摘要:写过基于B/S管理系统的同胞,可能遇到过,要用javascript打印网页,但是问题了,由于网页千奇百怪,想打印其中主要的内容,首次碰到这个问题,可能费尽了脑汁,但是结果都可能不尽人意。 这方面的解决办法大概有以下几下种: 1.临时更改 document.body.innerHTML,这个是简单,但是问题也大,就是页面本来很复杂的时候,这样临时一下子给替掉,会让浏览器卡住老半天,而且页面也变不回去了;

写过基于B/S管理系统的同胞,可能遇到过,要用javascript打印网页,但是问题了,由于网页千奇百怪,想打印其中主要的内容,首次碰到这个问题,可能费尽了脑汁,但是结果都可能不尽人意。

这方面的解决办法大概有以下几下种:

1.临时更改 document.body.innerHTML,这个是简单,但是问题也大,就是页面本来很复杂的时候,这样临时一下子给替掉,会让浏览器卡住老半天,而且页面也变不回去了;

2.弹一个新页页面,这个页面的内容和需要打印的内容是一样的,不过就是要弹一下新页面,比较麻烦,不容易被接受;

3.套一个iframe,把要打印的内容单独放这里面,但是有很多人控制不好,而且可能对iframe有些排斥。


我要介绍的就是第3种方式。

首页有两个页面

    1.正常页面:index.html

    2.需要打印的区域:c.html

原理:将焦点定位到iframe中,这样被打印的对象就是iframe了,其实打印的时候是对window对象进行打印,而iframe有独立的window对象。


index.html源代码:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
	<title>打印测试</title>
    </head>
<body>
	<input type="button" value="打印" onclick="window.frames['p'].doPrint()" />
	<iframe src="./c.html" frameborder="0" width="100%" id="p" name="p"></iframe>
	
</body>
</html>

c.html 源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
</head>
<body>
	<script>
		function doPrint(){
			window.focus();
			window.print();
		}
	</script>
	<div>
		这里是内容
	</div>
</body>
</html>

测试:

1.打开index.html,然后点击:“打印”按钮,弹出来的窗口中,选择一个打印机,建议选择XPS Document,它相当于虚拟打印机

2.查看结果,是不是只有c.html中的内容?


声明:以上内容仅代表作者观点,不代表爱符号赞成此内容或立场