本文介绍了一种使用JavaScript实现仅打印网页中指定div元素内容的方法，通过创建隐藏的iframe并克隆需要打印的内容到其中，再调用iframe的print方法来完成局部打印功能。
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="new printPartOfDocument('print','print_content');" id="print"/>
<div id="print_content">
<h1>只会打印这个div里的内容，下面的层的内容不会被打印 </h1>
<p>打印测试文字，打印测试文字，打印测试文字，打印测试文字，打印测试文字，打印测试文字，打印测试文字，打印测试文字，打印测试文字，打印测试文字，打印测试文字，打印测试文字，打印测试文字，打印测试文字，</p>
</div>
<div>
<h1>这个层的内容不会被打印</h1>
<p>这里的内容不会被打印，这里的内容不会被打印，这里的内容不会被打印，这里的内容不会被打印，这里的内容不会被打印，</p>
</div>
<script type="text/javascript" src="../JS/printPartOfDocument.js"></script>
<!-- <script type="text/javascript">
//new printPartOfDocument('print','print_content');
</script>-->
</body>
</html>
js代码:
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)
})
}
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
