javascript 调用浏览器的打印方法。并设置打印为横向打印

最新推荐文章于 2024-05-31 14:28:35 发布

NsdnResponsibility

最新推荐文章于 2024-05-31 14:28:35 发布

阅读量2.6w

点赞数 3

分类专栏： jsp 文章标签： javascript 打印 jsp

本文链接：https://blog.csdn.net/NsdnResponsibility/article/details/50982353

版权

jsp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近做一个简单的打印功能，要使用JavaScript调用浏览器的打印功能。并设置打印为横向打印：
为了适应A4纸的宽和高这里设置：

body{margin:0 auto;    
          width: 1010px;
          height: 369px;
     }

为了在页面做一个打印的按钮，但是在真实打印的时候该按钮又不能显示在打印页面上，这里我加了两个标识性的注释

<!--begin--><!--end-->

并写了一个打印的方法，在调用该方法是截取掉打印中不需要显示的内容，只包括标识性标签中的内容：

<script type="text/javascript">
            function printit(){
                if (confirm('确定打印吗？')){
                    try{
                        print.portrait   =  false    ;//横向打印 
                    }catch(e){
                        //alert("不支持此方法");
                    }
                     var bdhtml=window.document.body.innerHTML;//获取当前页的html代码    
                        var sprnstr="<!--begin-->";//设置打印开始区域    
                        var eprnstr="<!--end-->";//设置打印结束区域    
                        var prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)); //从开始代码向后取html    
                        var prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html    
                        window.document.body.innerHTML=prnhtml;    
                        window.print();    
                        window.document.body.innerHTML=bdhtml;    
                }

            }
        </script>

实例展示：

<style type="text/css">

     body{margin:0 auto;    
          width: 1010px;
          height: 369px;
          }
</style>

    <head>
    <title>打印标题</title>
        <script type="text/javascript">
            function printit(){
                if (confirm('确定打印吗？')){
                    try{
                        print.portrait   =  false    ;//横向打印 
                    }catch(e){
                        //alert("不支持此方法");
                    }
                     var bdhtml=window.document.body.innerHTML;//获取当前页的html代码    
                        var sprnstr="<!--begin-->";//设置打印开始区域    
                        var eprnstr="<!--end-->";//设置打印结束区域    
                        var prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)); //从开始代码向后取html    
                        var prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html    
                        window.document.body.innerHTML=prnhtml;    
                        window.print();    
                        window.document.body.innerHTML=bdhtml;    
                }

            }
        </script>
        <style type="text/css">
            .ipt{
                cursor: pointer;
            }
        </style>
    </head>

   <body>
            <OBJECT id="WebBrowser"  classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height=0 id=wb name=wb width=3></OBJECT>      
            <div id="kpr" style="margin:30px">      
            <input class="ipt" type="button"  value="打印"           onclick ="javascript:printit();">      
            <input class="ipt" type="button"   value="关闭"           onclick ="javascript:window.close();">    
            </div>
     <!--begin-->
            <h3>打印标题</h3>
           <table>
               <tr>
                  <td>内容</td>
                  <td>内容</td>
                  <td>内容</td>
                  <td>内容</td>
                  <td>内容</td>
                  <td>内容</td>
                  <td>内容</td>
                  <td>内容</td>
               </tr>
               <tr>
                  <td>内容2</td>
                  <td>内容2</td>
                  <td>内容2</td>
                  <td>内容2</td>
                  <td>内容2</td>
                  <td>内容2</td>
                  <td>内容2</td>
                  <td>内容2</td>
               </tr>
           </table> 
    <!--end-->
    </body>

预览：
页面预览时显示打印和关闭按钮

打印效果，点击打印按钮–>确定：
打印是不显示两个按钮

NsdnResponsibility

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
javascript 调用浏览器的打印方法。并设置打印为横向打印

最近做一个简单的打印功能，要使用JavaScript调用浏览器的打印功能。并设置打印为横向打印：为了适应A4纸的宽和高这里设置：body{margin:0 auto; width: 1010px; height: 369px; }为了在页面做一个打印的按钮，但是在真实打印的时候该按钮又不能显示在打印页面上，这里我加了两个标识性的注释 <!
复制链接

扫一扫

专栏目录