js打印页面里指定的内容

这个公司项目中的一个需求,效果是打印gmap里一个弹出层的内容,由于页面本身就已经有一个打印全页内容的功能,本来是想能过改变打印样式文件来实现这个功能的,但发现如果用户先打印这个弹出层的内容后,再打印全页内容的时候,样式文件没法变回原来的那个,也就是说没法确定改回原来的那个样式文件的时间点,由于时间比较紧,所以用的是window.open方法实现的。现在项目接近尾声,所以抽空写了个iframe版的。这样就没用前面讲到的问题了,也不用担心用户的浏览器屏蔽掉弹出窗口的问题了。

 

function printPartOfDocument() {
	this.init.apply(this, arguments)
}
printPartOfDocument.prototype = {
	init: function(o, part) {
		this.o = this.getId(o);
		this.part = this.getId(part);
		this.frame = '';
		this.printCss = '';
		var _this = this;
		this.addEvent(this.o, 'click',
		function() {
			_this.create()
		});
	},
	create: function() {
		var _this = this;
		if (!this.frame) {
			var oFrame = document.createElement('iframe');
			oFrame.setAttribute('id', 'printIframe');
			oFrame.style.position = 'absolute';
			oFrame.style.left = '-9999px';
			document.body.appendChild(oFrame);
		}
		if (!this.printCss) this.printCss = this.getPrintCss();
		setTimeout(function() {
			_this.frame = document.getElementById('printIframe'),
			d = _this.frame.contentWindow.document,
			h = d.getElementsByTagName('head')[0],
			b = d.getElementsByTagName('body')[0];
			for (var i = 0; i < _this.printCss.length; i++) {
				h.appendChild(_this.printCss[i]);
			}
			b.innerHTML = '';
			b.appendChild(_this.part.cloneNode(true));
			_this.frame.contentWindow.print();
		},
		0);
	},
	getPrintCss: function() {
		var styles = document.getElementsByTagName('head')[0].getElementsByTagName('link'),
		printCss = [];
		for (var i = 0; i < styles.length; i++) {
			var attr = styles[i].getAttribute('media');
			if (attr == 'all' || attr == 'print') printCss.push(styles[i].cloneNode(true));
		}
		return printCss;
	},
	getId: function(el) {
		return typeof el == 'string' ? document.getElementById(el) : el
	},
	addEvent: function(o, type, fn) {
		if (o.addEventListener) {
			o.addEventListener(type, fn, false)
		} else if (o.attachEvent) {
			o.attachEvent('on' + type,
			function() {
				fn.call(o, window.event)
			})
		}
	}
}

 

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>
<link href="global.css" rel="stylesheet" type="text/css"/>
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<link href="print2.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<a href="javascript:void(0)" title="print" id="print">print</a>
<div id="print_content">
  <h1>只会打印这个div里的内容,下面的层的内容不会被打印 </h1>
  <p>打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,</p>
</div>
<div>
  <h1>这个层的内容不会被打印</h1>
  <p>这里的内容不会被打印,这里的内容不会被打印,这里的内容不会被打印,这里的内容不会被打印,这里的内容不会被打印,</p>
</div>
<script type="text/javascript" src="printPartOfDocument.js"></script>
<script type="text/javascript">
new printPartOfDocument('print','print_content');
</script>
</body>
</html>

 

CSS:

 

print.css

@charset "utf-8";
/* CSS Document */
body { background:#CCC;}


print2.css:

@charset "utf-8";
/* CSS Document */
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#069;}
div { color:#000; border:1px solid #ddd; margin:10px auto; padding:10px;}
#print_content { border:1px solid red;}

,global.css

自己随便写吧。

 

这个函数的思路通过js在页面里动态创建一个iframe标签,然后将需要打印的内容clone到这个iframe里面,再获取页面里的media”all”或者“print”的样式文件插入到iframehead里面,再将iframe约对定位,left:-9999px,达到在页面上不显示的目的。最后将这个iframe打印出来即可。由于考虑到需要打印的内容也是由js动态创建的,第二次打印的时候会将先前的内容清空。这个函数需求传两个参数,一是要执行打印事件的对象,二是指定要打印的内容。

<!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> <link href="global.css" rel="stylesheet" type="text/css"/> <link href="print.css" rel="stylesheet" type="text/css" media="print" /> <link href="print2.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <a href="javascript:void(0)" title="print" id="print">print</a> <div id="print_content">   <h1>只会打印这个div里的内容,下面的层的内容不会被打印 </h1>   <p>打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,打印测试文字,</p> </div> <div>   <h1>这个层的内容不会被打印</h1>   <p>这里的内容不会被打印,这里的内容不会被打印,这里的内容不会被打印,这里的内容不会被打印,这里的内容不会被打印,</p> </div> <script type="text/javascript" src="printPartOfDocument.js"></script> <script type="text/javascript"> new printPartOfDocument('print','print_content'); </script> </body> </html>
posted @ 2010-10-14 15:39  zjhsd2007  阅读(...)  评论(...编辑  收藏