print之 js打印功能 

<include file="public@header"/>
<style type="text/css">
    .wrap{padding-top:0; padding-bottom: 0;}
    .health{width: 370px; height: 230px; margin:0 auto; margin-top: 20px; margin-bottom: 10px;}
    .health_title{font-family: "Microsoft YaHei"!important; height: 60px; line-height: 60px; background-color: #2d4e9a; text-align: center; color: rgb(255,255,255); font-size: 40px;}
    .health_left{float: left; width: 74%; height: 140px; padding: 8px 0; background-color: #FFF; color:#000; box-sizing:border-box;}
    .health_left .one{float: left; width: 90%; margin-left:8%; font-size: 12px; height: 18px; line-height: 18px;}
    .health_left .two{float: left; width: 42%; margin-left: 8%; font-size: 12px; height: 18px; line-height: 18px;}
    .health_left span{font-size: 12px;}
    .health_right{float: left; width: 26%; height: 140px; padding: 8px 0; margin:0 auto; font-size: 12px; text-align: center;}
    .health_right img{width: 80px; height: 90px; margin: 8px 0;}
    .health_right span{width:90%; text-align: center; line-height: 18px; height: 18px; font-size: 12px; margin-top: 1px;}
    .seal{width: 47%; display: inline-flex;}
    .health_foolt{font-family: "Microsoft YaHei"!important; float: left; height: 28px; line-height: 27px; background-color: #2d4e9a; text-align: center; color:rgb(255,255,255); width:100%;letter-spacing:3px;}
    .preview{height: 50px; line-height: 50px; text-align: center;}
    .preview button{width: 100px; height: 35px; line-height: 35px;}
    @page { margin: 0; }
    @media print {
        .health_title,.health_foolt{
            background-color: #2d4e9a!important;
            color: rgb(255,255,255)!important; 
            font-family: "Microsoft YaHei"!important;
        }
        .health_left,..health_right{
            font-family:'宋体'!important;
        }
    }
</style>
</head>
<body>
    <div class="wrap">
        <!--startprint-->
           <div class="health">
            <div class="health_title">健&nbsp;&nbsp;&nbsp;康&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;明</div>
            <div class="health_left" style="font-family:'宋体'!important;">
                  <div class="one">编号：<span></span></div>
                  <div class="two">姓名：<span></span></div>
                  <div class="two">性别：<span></span></div>
                  <div class="two">工种：<span></span></div>
                  <div class="two">年龄：<span></span></div>
                  <div class="one">体检：<span></span></div>
                  <div class="one">工作单位：<span></span></div>
                  <div class="one">发证日期：<span></span></div>
                  <div class="one">健康检查单位<span class="seal"></span>（章）</div>
            </div>
            <div class="health_right" style="font-family:'宋体'!important;">
                  <img class="right_img" src=''>
                  <div>(有效期一年)</div>
            </div>
            <div class="health_foolt">济南高新技术产业开发区管委会市场监督局</div>
          </div>
          <!--endprint-->
        <div class="preview">
            <button onclick="preview(1)" class="noprint">打印</button>
        </div>
    </div>
</body>
<script>
    function preview(oper){
        if (oper < 10){
            bdhtml=window.document.body.innerHTML;//获取当前页的html代码
            sprnstr="<!--startprint-->";//设置打印开始区域
            eprnstr="<!--endprint-->";//设置打印结束区域
            prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+20); //从开始代码向后取html
             
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
            window.document.body.innerHTML=prnhtml;
            window.print();
            // window.document.body.innerHTML=bdhtml;
        } else {
            window.print();
        }
    }
</script>
</html>

 

posted @ 2018-07-03 11:30  二月花开  阅读(5546)  评论(0)    收藏  举报