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

网页局部打印功能

作者: 贝尔微微 | 来源:发表于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