Jquery extension - print partial content of page

Sometimes we need to click the print button to print the partial content in the web page, such as table data. At this time, we can borrow a piece of Jquery extension code.
Of course, all elements must be included in the printed content, such as CSS must be written in the label.
<!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%;
        }
        
        .printLeft {
            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">
                After review, approved by Beijing Jose Technology Co., Ltd.
                <br> As a member of China Building Waterproof Association, hereby certify
            </div>
            <div class="pringFoot">
                <div class="prinLeft">
                    Certificate number: 0123456789
                    <br> Validity: May 14, 2017
                </div>
                <div class="prinRight">
                    China Building Waterproof Association
                    <br> May 14, 2017
                </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>
Jquery extension - print partial content of page

Guess you like
