Jquery扩展-打印页面局部内容

菜鸟新手taob

2017-07-13

有时候我们需要点击打印按钮打印网页中的局部内容，比如表格数据，这时候可以借用一段Jquery的扩展代码。

当然，打印的内容里面必须包含所有要素，比如CSS必须写在标签里面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>printArea By Jquery Extend</title>
</head>

<body>
    <div id="printJShtml">
        <style>
        .priscroll {
            overflow-y: hidden;
        }
        
        .printImg {
            position: relative;
            max-width: 1000px;
            height: 674px;
            margin-top: 2%;
        }
        
        .prinImgbj {
            position: absolute;
            left: 0;
            top: 0;
            height: 674px;
        }
        
        .prinImglogo {
            position: absolute;
            width: 38%;
            left: 31%;
            top: 27%;
        }
        
        .prinImglogo img {
            width: 80%;
        }
        
        .pringcont {
            position: absolute;
            width: 56%;
            left: 23%;
            bottom: 30%;
            font-size: 20px;
        }
        
        .pringFoot {
            position: absolute;
            left: 0;
            bottom: 15%;
            zoom: 1;
            overflow: hidden;
            width: 100%;
        }
        
        .prinLeft {
            float: left;
            padding-left: 95px;
            line-height: 30px;
            font-size: 18px;
        }
        
        .prinRight {
            float: right;
            padding-right: 95px;
            line-height: 30px;
            font-size: 18px;
        }
        </style>
        <div class="printImg">
            <img src="http://fsxhht.zhongkefu.com.cn/images/beijing.jpg" class="prinImgbj">
            <img src="http://fsxhht.zhongkefu.com.cn/images/logofs.png" class="prinImglogo">
            <div class="pringcont">
                经审核，批准 北京若泽科技有限公司
                <br> 为中国建筑防水协会会员，特此证明
            </div>
            <div class="pringFoot">
                <div class="prinLeft">
                    证书编号：0123456789
                    <br> 有 效 期： 2017年5月14日
                </div>
                <div class="prinRight">
                    中国建筑防水协会
                    <br> 2017年5月14日
                </div>
            </div>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    (function($) {
        var printAreaCount = 0;
        $.fn.printArea = function() {
            var ele = $(this);
            var idPrefix = "printArea_";
            removePrintArea(idPrefix + printAreaCount);
            printAreaCount++;
            var iframeId = idPrefix + printAreaCount;
            var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
            iframe = document.createElement('IFRAME');
            $(iframe).attr({
                style: iframeStyle,
                id: iframeId
            });
            document.body.appendChild(iframe);
            var doc = iframe.contentWindow.document;
            $(document).find("link").filter(function() {
                return $(this).attr("rel").toLowerCase() == "stylesheet";
            }).each(
                function() {
                    doc.write('<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >');
                });
            doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html() + '</div>');
            doc.close();
            var frameWindow = iframe.contentWindow;
            frameWindow.close();
            frameWindow.focus();
            frameWindow.print();
        }
        var removePrintArea = function(id) {
            $("iframe#" + id).remove();
        };
    })(jQuery);
    $(function(){
        $('#printJShtml').printArea();
    })
    </script>
</body>

</html>

position jquery absolute