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>