zoukankan      html  css  js  c++  java
  • 前端-打印指定内荣容

    正文:

      打印网页内指定的内容:共有4种方案:

      

    方案一.1:利用js操作

    html内容如下:

    <script language="javascript"> 
    function preview() 
    { 
    bdhtml=window.document.body.innerHTML; 
    sprnstr="<!--startprint-->"; 
    eprnstr="<!--endprint-->"; 
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); 
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); 
    window.document.body.innerHTML=prnhtml; 
    window.print(); 
    } 
    </script>
    
    <div>文件头部,不打印出来的内容。。。</div>
    <div>文件头部,不打印出来的内容。。。</div>
    <div>文件头部,不打印出来的内容。。。</div>
    <!--startprint-->
    <div>这是被打印出来的内容</div>
    <div>这是被打印出来的内容</div>
    <div>这是被打印出来的内容</div>
    <div>这是被打印出来的内容</div>
    <!--endprint-->
    <div>文件尾部,不打印出来的内容。。。</div>
    <div>文件尾部,不打印出来的内容。。。</div>
    <div>文件尾部,不打印出来的内容。。。</div>
    <input type="button" name="print" value="预览并打印" onclick="preview()">
    方案一.2:
    <script language="javascript" type="text/javascript">
        function printpage(myDiv){    
        //var newstr = document.all.item(myDiv).innerHTML; 
        var newstr = document.getElementById(myDiv).innerHTML;
        var oldstr = document.body.innerHTML; 
        document.body.innerHTML = newstr; 
        window.print(); 
        document.body.innerHTML = oldstr; 
        return false; 
        } 
        </script>
       <div id="myDiv">Content</div>
    <input type="button" id="bt" onclick="javascript:printpage('myDiv')"   value="打印" />
    方案一.3:
    <html> 
    <head> 
    <title>jquery 打印指定区域内容</title> 
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    function printHtml(html) {
    var bodyHtml = document.body.innerHTML;
    document.body.innerHTML = html;
    window.print();
    document.body.innerHTML = bodyHtml;
    }
    function onprint() {
    var html = $("#printArea").html();
    printHtml(html);
    }
    </script>
    </head>
    <body>
    <div>
    <div id="printArea" style=" 500px; text-align: left;">
    打印区域~~~~
    </div>
    <br />
    <div>
    <input type="button" id="btnPrint" onclick="onprint()" value="print" />
    </div>
    </div>
    </body>
    </html>
    方案二:JavaScript打印函数
    <script>
    function myPrint(obj){
        //打开一个新窗口newWindow
        var newWindow=window.open("打印窗口","_blank");
        //要打印的div的内容
        var docStr = obj.innerHTML;
        //打印内容写入newWindow文档
        newWindow.document.write(docStr);
        //关闭文档
        newWindow.document.close();
        //调用打印机
        newWindow.print();
        //关闭newWindow页面
        newWindow.close();
    }
    myprint()调用方法:
    myPrint(document.getElementById('printDivID'));
    </script>
    <div id="print">
    <hr />
       打印演示区域,点击打印后会在新窗口加载这里的内容!
    <hr />
    </div>
    <button onclick="myPrint(document.getElementById('print'))">打 印</button>
    方案三:采用print的事件,显隐内容
    <script type="text/javascript">  
    
      //自动在打印之前执行  
        window.onbeforeprint = function(){  
            $("#test").hide();  
        }  
      
        //自动在打印之后执行  
        window.onafterprint = function(){  
            $("#test").show();  
        }  
    </script>  
      
    <div id="test">这段文字不会被打印出来</div> 

    详情见:W3CSchoolHTML onbeforeprint 事件属性

     
    参考:js print打印网页指定区域内容
     
  • 相关阅读:
    asp.net后台注册js的四种方法
    前端代码标准最佳实践:CSS
    开始ASP.NET MVC5之旅
    Android应用中如何保护JAVA代码
    C# Winform 拦截关闭按钮触发的事件
    idea没有转换web选项
    Mysql Too many connections
    SpringBoot添加WEB模块
    Maven报错Failed to collect dependencies at com.***:***:jar:1.0.0
    CentOS出现内存溢出
  • 原文地址:https://www.cnblogs.com/not-NULL/p/5395962.html
Copyright © 2011-2022 走看看