Lodop打印样式问题与解决方法 原
遇到问题及解决方法
1、<h3 class="printTitle">工商客户抄表收费通知单</h3> 标题，在打印预览时最后一个字会变小
解决方法：把h3用div代替
2、如果图片固定在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;}
3、如果图片特别大，在打印预览的时候图片会很模糊，
需要把图片处理成小图片，一般是css样式大小的2倍即可
4、如果要打印输入框里面的内容
（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;
5、打印预览时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、请于每月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">2、客户须按时缴费，逾期五日不缴，除每日按万分之二收取滞纳金外，同时将根据《燃气供应气合同》的相关约定进行减供或停供气措施。</div>
<div class="desTitle">3、通知单若有差错，以燃气费发票为准。 </div>
<div class="desTitle">4、客户须按合同规范用气和安全用气。</div>
<div class="desTitle">5、客服电话：96077（8：00——19：00）全年无休
<br /> 抢险电话：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>(adsbygoogle = window.adsbygoogle || []).push({});