前言：
lodop的打印功能已经非常强大，但因为业务的需要，我们还是将其给在web端实现了一份，当然，内部机制还是使用了lodop的打印功能。
据我所知，lodop的打印指令有以下两种模式：
1：html形式的打印
这种打印可以将html页面作为字符串保存下来，给到打印机进行打印
2：特殊指令的打印
这种利用譬如：LODOP.SET_PRINT_STYLEA等指令，传给打印机 进行打印
而我们的系统，因为考虑到是从老系统lodop的特殊指令转换过来的，所以不得以采用了第二种方法，也是磕磕绊绊实现了现在的结果，但是问题还是比较多的，毕竟涉及到软件调用硬件，并且这个硬件种类较多，还不会去兼容这个软件，只能软件去兼容硬件，所以维护的成本还是比较高的。
一：页面设计
该打印的设计模块上，采用了创建一个打印插件的方式进行书写，具体调用与形式如下：
插件JS框架：
;(function ($, window, document, undefined) { var Ipad = function (elem, options) { this.defaults = { saveUrl:'', // 打印的保存地址 saveParam:'', // 保存时传入的参数 designFlag:'', // 套打设计 还是 标签设计 defaultImgSrc:'', // 默认的图片地址 templateName:'', // 打印的模板名称 ： taoda envelope(信封) biaoqian saveTipMessage:'', // 保存的模板提示信息 saveRecommendTemplate:false // 是否切换到了推荐模板（现在只有运单设计有） }; this.opts = $.extend({}, this.defaults, options); this.$keKingPrint = elem; // 打印的整个页面对象 }; Ipad.prototype= { /** * 一些调用方法 * */ inital:function () { this.allFieldAddEvent(); // 为所有的预设字段加上click事件，点击后在打印区域创建该字段 this.addField.call(this,this.$ipadAdd,this.$ipadAddContent,this); // 插入自定义文本的功能 （现仅存在与标签设计） this.keyCodeAddField(this.$ipadAddContent,this); // 将自定义字段的 enter 键 直接插入到打印区域（现仅存在与标签设计） this.currentAreaEvent(); // 在某个区域内 点击任何处都会将触发选择取消行为 this.LODOP_PREVIEW(this.previewLodop); // 预览按钮函数 this. LODOP_print(this.printLodop); // 打印按钮 (已经删除该按钮) this.LODOP_save(this.saveLodop); // 保存打印设置按钮 this.userRecommendTemplate(this.recommendTemplate,this); // 推荐模板 this.renderToDefault(this.toDefault,this.$ipadContent); // 清空字段的按钮 this.changeBiaoQianTemplate(this.chooseTemplate); // 标签页面的下拉框，用来选择当前模板 this.userInfoInital(); // 初始化 渲染页面的函数 该函数调用后台接口 返回打印模板 this.imgWidthFun(this.imgStyleSet); // 输入打印参数时 纸张的高宽变化函数 this.previewImg(this.upLoadBgPic); // 上传背景并保持可预览的功能 this.changeFont(this); // 这里包括对字体各种样式的设置 还有一些页面渲染时 绑定的键盘事件 this.checkAll(this); // 全选按钮 this.addCopy(this); // 粘贴按钮 this.textEdite(this.addFileOfT,this); // T 按钮 添加字段 } } $.fn.ipad = function (options) { var ipad = new Ipad(this, options); return ipad.inital(); }; })(jQuery, window, document, undefined);
上面的Ipad.protype属性里面， 是该插件的功能核心部分，具体的实现方法在其内部
页面Html
<div id="print_envelope" class="keKingPrint"> /** 这里是页面内容部分 **/
<div class="pageContainer">
该部分是创建的字段插入的部分
</div>
</div>
调用插件部分的js
$('#print_envelope').ipad({
saveUrl:'${ctx}/ltl/printTemplate/saveByNo',
saveParam: {no: "Sheet.envelope.template"},
designFlag:'taoDa',
templateName:'envelope',
saveTipMessage:'是否确认保存信封设计',
defaultImgSrc:defaultImgSrc
});
二：思想分析
* 1：判断当前页是运单设计还是标签设计
* 2：请求后台 拿到相对应的打印模板
* 3：调用相对应的模板解析代码，进行反向解析，该部分包括纸张的宽度，图片信息等
*
三：进行一些核心部分函数的分析
1：createDiv
* 该函数的主要功能是用来创建设计区域的字段，含有以下情况：
* 1：点击模板字段
* 2：点击横竖线，矩形
* 3：渲染页面时解析打印指令然后创建字段
* 4：插入自定义字段时创建字段
* 5：点击‘运单进度二维码’时创建二维码字段
* 6：点击‘T’时创建字段
由上可知，其实我们的设计里，很多地方都需要去调用该函数，用来往页面上插入。所以这属于一个公共的方法，很多地方在调用，进而也导致该函数耦合度比较高，用传参来控制不同的情况之下的渲染方案，
函数传参如：createDiv:function (obj,obj1,isRender,diyField,Qr,labelFlag,isEdite)，对应上方的一些说明。
看一下页面创建的html元素与插入的位置：
手动创建html元素，并且将后台指令里含有
1：createDiv
1：createDiv
1：createDiv
1：createDiv
1：createDiv
四：一些主要用到的指令说明：
* LODOP.PRINT_INIT("套打设计"); 给打印机起个当前的打印任务名
* LODOP.ADD_PRINT_TEXT(160,39,218,221,"{{d.物流公司名称}}"); 打印字段
* LODOP.SET_PRINT_STYLEA(0,"FontName","微软雅黑"); 打印字段的样式设计
* LODOP.SET_PRINT_STYLEA(0,"FontSize",14); 打印字段的字体大小设计
* ADD_PRINT_LINE(Top1,Left1, Top2, Left2,intLineStyle, intLineWidth) 画横竖线
* ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor) 画图形
* LODOP.ADD_PRINT_IMAGE(0,0,width,height) 打印图片
* LODOP.SET_PRINT_STYLEA(0,"Stretch",1);\n'; 控制图片(可变形)扩展缩放模式
* LODOP.PREVIEW() 预览图片
* LODOP.PRINT() 打印图片