• window.print()局部打印三种方式


    首先准备要打印的内容,也可以打印时再填充,html中定义如下:

    <!--startprint-->
    <div id="printcontent" style="display:none">
    ${printContentBody}
    </div>
    <!--endprint-->

    方法一: 通过开始、结束标记(startprint、endprint)来打印

    function doPrint() { 
        bdhtml=window.document.body.innerHTML; 
        sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
        eprnstr="<!--endprint-->"; //结束打印标识字符串
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
        window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
        window.print(); //调用浏览器的打印功能打印指定区域
        window.document.body.innerHTML=bdhtml;//重新给页面内容赋值;
        return false;
    }

    方法二:通过id选择器来替换内容打印,方法类似第一种

    function doPrint2(){
        if(getExplorer() == "IE"){
            pagesetup_null();
        }
        //根据div标签ID拿到div中的局部内容
        bdhtml=window.document.body.innerHTML; 
        var jubuData = document.getElementById("printcontent").innerHTML;
        //把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容
        window.document.body.innerHTML= jubuData; 
        //调用打印功能
        window.print();
        window.document.body.innerHTML=bdhtml;//重新给页面内容赋值;
        return false;
    }
    
    function pagesetup_null(){                
        var hkey_root,hkey_path,hkey_key;
        hkey_root="HKEY_CURRENT_USER";
        hkey_path="\Software\Microsoft\Internet Explorer\PageSetup\";
        try{
            var RegWsh = new ActiveXObject("WScript.Shell");
            hkey_key="header";
            RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
            hkey_key="footer";
            RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
        }catch(e){}
    }
    
    function getExplorer() {
        var explorer = window.navigator.userAgent ;
        //ie 
        if (explorer.indexOf("MSIE") >= 0) {
            return "IE";
        }
        //firefox 
        else if (explorer.indexOf("Firefox") >= 0) {
            return "Firefox";
        }
        //Chrome
        else if(explorer.indexOf("Chrome") >= 0){
            return "Chrome";
        }
        //Opera
        else if(explorer.indexOf("Opera") >= 0){
            return "Opera";
        }
        //Safari
        else if(explorer.indexOf("Safari") >= 0){
            return "Safari";
        }
    }

    方法三:通过动态创建iframe来打印(推荐的方法)

    这里要注意判断iframe是否存在,防止反复使用时,iframe重复创建消耗内存

    function doPrint3(){
        
        //判断iframe是否存在,不存在则创建iframe
        var iframe=document.getElementById("print-iframe");
        if(!iframe){  
                var el = document.getElementById("printcontent");
                iframe = document.createElement('IFRAME');
                var doc = null;
                iframe.setAttribute("id", "print-iframe");
                iframe.setAttribute('style', 'position:absolute;0px;height:0px;left:-500px;top:-500px;');
                document.body.appendChild(iframe);
                doc = iframe.contentWindow.document;
                //这里可以自定义样式
                //doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
                doc.write('<div>' + el.innerHTML + '</div>');
                doc.close();
                iframe.contentWindow.focus();            
        }
        iframe.contentWindow.print();
        if (navigator.userAgent.indexOf("MSIE") > 0){
            document.body.removeChild(iframe);
        }
        
    }

    使用方法一、二时,弊端有2个:

    1)由于替换来当前页面的内容,从而当取消打印时,会使原来的页面一些form表单失效。

    2)当前页面中的样式会影响到打印的内容中的样式。

    所以这里推荐使用iframe来创建,并且可以自定义样式。

    以上内容在谷歌浏览器下测试通过,其他浏览器未做验证。

    -------------------------------------------------------------------------------

    190622更新说明:

    看到两个伙伴留言,我说说后面发生的事儿吧,我当时做的是电子面单的打印,但是发现第三种方法打印出的电子面单的条码还是不太清洗,字体偏淡。

    所以最后也没有用第三种方法,直接使用lodop来打印了。

    但是本身第三种方法测试是可行的。

  • 相关阅读:
    office 所有后缀对应的 content-type
    Vue 拖拽组件 vuedraggable 和 vue-dragging
    vue实现word,pdf文件的导出功能
    vue浏览器全屏实现
    对于js中事件冒泡的理解分析
    一个服务端的登录拦截
    ES6兼容ie9, flex兼容ie9
    webpack报错
    vue项目的一个package.json
    vue项目的构建过程
  • 原文地址:https://www.cnblogs.com/30go/p/9788990.html
Copyright © 2020-2023  润新知