js打印指定DOM元素内的内容

天边一朵雲

浏览: 36146 次
性别:
来自: 成都

最近访客更多访客>>

yangxiaochenIT

一个人的Alone

hhlbyhz

jolinserda

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

1：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)
            })
        }
    }
}

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>

方法2:

function Printpart(idstr){//idstr 要打印内容中的id
   var el = document.getElementById(idstr);
   var iframe = document.createElement('IFRAME');
   var doc = null;
   iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
   document.body.appendChild(iframe);
   doc = iframe.contentWindow.document;
   doc.write('<div>' + el.innerHTML + '</div>');
   doc.close();
   iframe.contentWindow.focus();
   iframe.contentWindow.print();
   if (navigator.userAgent.indexOf("MSIE") > 0){
		document.body.removeChild(iframe);
   }
}

来自：http://www.oschina.net/code/snippet_569983_11216

分享到：