HTML网页打印

最新推荐文章于 2024-03-06 17:49:21 发布

Jredreamer

最新推荐文章于 2024-03-06 17:49:21 发布

阅读量3k

点赞数

分类专栏： Web前端

Web前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

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

<!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>

为了防止遗忘特此记录

转载自：http://www.oschina.net/code/snippet_569983_11216

Jredreamer

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML网页打印

function printPartOfDocument() { this.init.apply(this, arguments)}printPartOfDocument.prototype = { init: function(o, part) { this.o = this.getId(o); this.part = this.getId(pa
复制链接

扫一扫