浏览器打印--兼容IE、局部打印

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title></title>
        <style type="text/css">
            @media print {
                .noprint {
                    display: none;
                }
            }
        </style>
    </head>

    <body>
        <OBJECT id="WebBrowser" height="0" width="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" name="wb"></OBJECT>
        <div>
            <button id="printBtn" class="noprint">打印</button>
        </div>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>666</li>
            <li>777</li>
            <li>888</li>
            <li>999</li>
            <li>000</li>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <script>
            /** execwb() 参数以及功能：(wb:OBJECT元素的name属性值)
             * wb.execwb(1, 1) //打开
             * wb.ExecWB(2, 1); //关闭现在所有的IE窗口，并打开一个新窗口
             * wb.ExecWB(4, 1) //;保存网页
             * wb.ExecWB(6, 1) //打印
             * wb.ExecWB(7, 1) //打印预览
             * wb.ExecWB(8, 1) //打印页面设置
             * wb.ExecWB(10, 1) //查看页面属性
             * wb.ExecWB(15, 1) //好像是撤销，有待确认
             * wb.ExecWB(17, 1) //全选
             * wb.ExecWB(22, 1) //刷新
             * wb.ExecWB(45, 1) //关闭窗体无提示
             */

            /**
             * IE浏览器打印时,OBJECT元素是必须要有的,OBJECT元素可以放在页面中任何位置
             * 局部打印时,不需要打印的元素,添加noprint这个class
             */
            var $printBtn = document.getElementById('printBtn');
            $printBtn.onclick = function() {
                if(!!window.ActiveXObject || "ActiveXObject" in window) {
                    wb.execwb(7, 1); // 调用IE的打印预览
                    //document.getElementById("WebBrowser").ExecWB(7,1)
                    // 报错:找不到成员;
                    // 原因: 是internet安全选项中自定义级别那里需要启用没有标记为安全的ActiveX控件,  也就是IE安全的设置
                    // 解决: 方法1:在IE浏览器菜单栏依次选择“工具”→“Internet选项”→“安全”→“受信任的站点”→“站点”，在“站点”窗口打开后,输入 *,“添加”
                    //       方法2:在IE浏览器菜单栏依次选择“工具”→“Internet选项”→“安全”→“internet”→“自定义级别”，启用ActiveX控件
                } else {
                    window.print();
                }
            }
            /**
             * 如果是在iframe中,需要打印(布局),调用该方法
             */
            function printEntrust() {
                var aa = window.parent.document.getElementsByName("mainFrame")[0]; // 获取当前所在的iframe元素
                var printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body>";
                var content = "";
                var older = document.body.innerHTML; // iframe原来的内容
                var str = document.getElementById('printContent').innerHTML; //获取需要打印的页面元素
                content = content + str;
                var $height = $(aa).prop('scrollHeight'); // iframe原来的高度
                printStr = printStr + content + "</body></html>";
                if(!!window.ActiveXObject || "ActiveXObject" in window) {
                    $('#printContent').removeClass('hidden').addClass('show');
                    aa.setAttribute("scrolling", "no"); // 防止打印预览时出现滚动条
                    var $h = $('#printContent').prop('scrollHeight'); // 获取打印页面的实际高度
                    $(aa).css({
                        'height': $h + 'px'
                    }); // 根据内容的高度设置iframe的高度
                    // document.getElementById("WebBrowser1").execWB(6,1); // 调用IE的打印
                    document.getElementById("WebBrowser1").execWB(7, 1); // 调用IE的打印预览
                    $('#printContent').removeClass('show').addClass('hidden'); // 隐藏打印内容
                    $(aa).css({
                        'height': $height + 'px'
                    }); // 恢复iframe原来的高度
                } else {
                    document.body.innerHTML = printStr; //构建新网页
                    window.print(); //打印刚才新建的网页
                    document.body.innerHTML = older; //将网页还原
                    return false;
                }
            }
        </script>
    </body>

</html>
浏览器打印--兼容IE、局部打印

猜你喜欢
