Lodop打印样式问题与解决方法

遇到问题及解决方法

一、<h3 class="printTitle">工商客户抄表收费通知单</h3> 标题，在打印预览时最后一个字会变小

      解决方法：把h3用div代替

二、若是图片固定在div的右下角，使用absolute布局，外层div position:relatvie;width:100% 必定要加width:100;不然image 会在div的下面

    .des{position:relative;width:100%;line-height:26px;margin-bottom:20px;}

    .qrcodeimg{position:absolute;right:80px;bottom:-50px;width:210px;}

三、若是图片特别大，在打印预览的时候图片会很模糊，

     须要把图片处理成小图片，通常是css样式大小的2倍便可

四、若是要打印输入框里面的内容

   （1）input文本框

           1-1  若是输入框较少能够直接js赋值

          <input type="text" class="form-control input-sm " value="" id="signName" />

           document.getElementById("signName").setAttribute("value",                          document.getElementById("signName").value);

          1-2  多个input文本框的状况：

            $('input:text').each(function(i, n) {
                     this.setAttribute('value', this.value);
            });

（2）若是是textarea

 <textarea class="form-control fenxibaogao" rows="3" value="123" id="fenxibaogao"></textarea>

document.getElementById("fenxibaogao").innerHTML =     document.getElementById("fenxibaogao").value;

五、打印预览时input和textarea背景淡绿色

    个人win10系统是默认开启护眼功能，关闭系统的护眼功能便可，关闭方法以下：

 （1）打开注册表：win+R“regedit”肯定；

 （2）依次打开[HKEY_CURRENT_USER\Control Panel\Colors]， 把Windows的值199 237 204 改成“255 255 255”；

 （3）依次打开[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Themes\DefaultColors\Standard]，双击Window，改为FFFfff，记得选择16进制；

（4）重启电脑

完整的例子

<style type="text/css" id="style1">
    .printTitle {
        font-size: 24px;
        text-align: center;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .top-logo {
        height: 55px;
        overflow: hidden;
    }

    .xuzhoulogo1 {
        width: 180px;
        float: left;
    }

    .xuzhoulogo2 {
        width: 180px;
        float: right;
    }

    table {
        width: 100%;
        margin-bottom: 20px;
    }

    table,
    td,
    th {
        border: 1 solid #000000;
        border-collapse: collapse
    }

    td,
    th {
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        text-align: left;
    }

    ul {
        list-style: none;
    }

    .des {
        position: relative;
        width: 100%;
        line-height: 26px;
        margin-bottom: 20px;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .subtitle {
        padding-left: 15px;
    }

    .subtitle ul {
        padding-left: 25px;
    }

    .qrcodeimg {
        position: absolute;
        right: 80px;
        bottom: -50px;
        width: 210px;
    }

    .chaobiaoInfo {
        font-size: 15px;
    }

    .chaobiaoSign {
        border: none;
        border-bottom: 1px solid #333;
    }
    </style>

<a href="javascript:prn1_preview()">
    <button class="btn btn-info print-btn">打印</button>
</a>
<div class="printTitle">工商客户抄表收费通知单</div>

<div class="table-responsive">
    <table class="table table-bordered">
        <tbody>
            <tr>
                <th colspan="">户名</th>
                <td colspan="">小李</td>
                <th colspan="">客户编号</th>
                <td colspan="">南表</td>
            </tr>
            <tr>
                <th>燃气表号</th>
                <td></td>
                <th>应交月份</th>
                <td>3月</td>
            </tr>
            <tr>
                <th>本月抄见数（2018-06-28 08:00:00）</th>
                <td class="text-right">100 m³</td>
                <th>单价</th>
                <td class="text-right">2.5元/m³</td>
            </tr>
            <tr>
                <th>上月抄见数（2018-06-28 08:00:00）</th>
                <td class="text-right">50m³</td>
                <th>燃气表规格</th>
                <td></td>
            </tr>
            <tr>
                <th>消耗量</th>
                <td class="text-right">50m³</td>
                <th>缴费金额</th>
                <td></td>
            </tr>
            <tr>
                <th>备注</th>
                <td colspan="3" style="color:red">本月帐单没法生成，请与人工台联系</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="des">
    <div class="desTitle">一、请于每个月1号至10号到徐州港华指定缴费网点缴费：</div>
    <ul class="subtitle">
        <li>（1）客户中心现金及POS机刷卡缴费；</li>
        <li>（2）淮海农商银行及江苏银行代收点现金缴费；</li>
        <li>（3）网银划款（工商银行、建设银行、邮政储蓄银行），网银划款后请在每 月10号前持划款凭证至港华客服中心换取发票；
        </li>
        <li>（4）电子平台缴费：
            <ul>
                <li>1）经过支付宝输入户号后缴费（营业费用除外）：</li>
                <li>2）经过港华交易宝（登录http:www.ganghuapay.com.cn或手机扫描右方二维码下载APP客户端）缴纳。</li>
            </ul>
        </li>
    </ul>
    <div class="desTitle">二、客户须按时缴费，逾期五日不缴，除每日按万分之二收取滞纳金外，同时将根据《燃气供应气合同》的相关约定进行减供或停供气措施。</div>
    <div class="desTitle">三、通知单如有差错，以燃气费发票为准。 </div>
    <div class="desTitle">四、客户须按合同规范用气和安全用气。</div>
    <div class="desTitle">五、客服电话：96077（8：00——19：00）整年无休
        <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;抢险电话：85557995（24小时整年无休）</div>
    <img src="../../dist/img/xuzhouBarcode.jpg" alt="维格电子" class="qrcodeimg">
</div>
<div class="chaobiaoInfo">抄表员：
    <input type="text" class="chaobiaoSign" /> 抄表日期：
    <input type="text" class="chaobiaoSign" /> </div>
</div>

<script language="javascript" type="text/javascript">
    var LODOP; //声明为全局变量 
    function prn1_preview() {
        $('input:text').each(function(i, n) {
            this.setAttribute('value', this.value);
        });
        CreateOneFormPage();
        LODOP.PREVIEW();
        //LODOP.PRINT_DESIGN();	
        //LODOP.PRINT_SETUP();	
    };

    function CreateOneFormPage() {
        LODOP = getLodop();
        LODOP.PRINT_INIT("打印帐单");
        LODOP.SET_PRINT_STYLE("FontSize", 16);
        //LODOP.SET_PRINT_STYLE("Bold", 20);
        //LODOP.ADD_PRINT_TEXT(50, 271, 270, 39, document.getElementById("shoufei-notice-title").innerHTML);
        var strBodyStyle = "<style>" + document.getElementById("style1").innerHTML + "</style>";
        var strFormHtml = strBodyStyle + "<body>" + document.getElementById("printArea").innerHTML + "</body>";
        LODOP.ADD_PRINT_HTM(10, 0, "100%", "100%", strFormHtml);
    };
    </script>