lodop打印技巧与主要事项

打印前的准备工作
首先用Html和css把完整的打印页面写出,注意需要输入内容的地方要用input输入框,

技术要点:
1、input的样式,由于input的默认样式每个浏览器显示不一样,既不美观也不统一,这里先统一input的样式
input[type="text"]{border:1px solid #ccc;padding-left:5px;height:20px;line-height:20px;}
input:focus {border-color: #3c8dbc;box-shadow: none;outline: 0;}
//以上样式为bootstrap的input 样式
2、打印预览的内容是input输入的内容,正常情况下,不管输入什么内容,打印预览的的内容都是input的初始value值,修改input的内容不改变html的value属性需要用js修改属性

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

接着就要安装lodop插件,谷歌42版本以上的要安装c-lodop,通过打印设计把需要输出的文字,在打印设计里面把代码输出,黏贴到html页面如下
LODOP.ADD_PRINT_TEXT(211,489,81,20,"输出内容1");
然后换成动态的输出内容
LODOP.ADD_PRINT_TEXT(211,489,81,20,document.getElementById("price").innerHTML); 

然后把打印设计改成打印预览LODOP.PREVIEW();也可以把页面微调的权限授权给客户,由于每台打印机不一样,客户可以自己微调页面的位置LODOP.PRINT_SETUP(); 

你可能感兴趣的:(lodop打印技巧与主要事项)