lodop打印技巧与注意事项

2019独角兽企业重金招聘Python工程师标准>>>

打印前的准备工作
首先用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(); 

转载于:https://my.oschina.net/u/2612473/blog/646736