美文网首页
网页局部打印功能

网页局部打印功能

作者: 贝尔微微 | 来源:发表于2017-11-01 11:24 被阅读8次

    思路: 将打印内容写入到iframe中,通过iframe的window对象print()方法实现iframe打印

        function printPage(ifram_id) {
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                window.frames[ifram_id].focus();
                print();
            }
            else {
            document.getElementById(ifram_id).focus();
            document.getElementById(ifram_id).contentWindow.print();
            }
        }
    

    如果通过字符串拼接动态生成打印内容,当内容中存在img时,需要等待图片加载完毕,在触发打印。

        var load_count = 0;//统计加载成功图片数
        $('#iframe_id').find('img')//获取打印框中图片的数量
                .on('load', function(){
                    load_count++
                    //图片加载完毕,开始打印
                    if(load_count === render_dom.find('img').length) {
                      //
                        printPage('print-page');
                    }
                })
                .on('error', function () {
                    load_count++
                    //图片加载完毕,开始打印
                    if(load_count === render_dom.find('img').length) {
                        printPage('print-page');
                    }
                })
    

    相关文章

      网友评论

          本文标题:网页局部打印功能

          本文链接:https://www.haomeiwen.com/subject/ykbwpxtx.html