下载lodop插件实现打印功能（element-ui框架）
一、vuejs弹窗部分
<el-dialog title="打印" width="960px" custom-class="retDialog printDialog":close-on-click-modal="false" :append-to-body='true' :visible.sync="printDialog.showFlag"@close='closePrintDialog'><div class="print-content"><el-table:data="printDialog.printList"fitstyle="width: 100%"><el-table-columnprop="assetName"label="名称"align="center"min-width="120":show-overflow-tooltip="true"></el-table-column>...//其他列</el-table><el-pagination></el-pagination><div slot="footer" class="dialog-footer print-footer"><el-button class="btn-left" @click="printPriew">打印预览</el-button><el-button class="btn-left" @click="print">打印</el-button><el-button class="btn-right" @click="printSetup">打印维护</el-button></div></el-dialog>
二、methods部分
//点击打印按钮展示弹窗showPrintDialog:function(showFlag){this.printDialog.showFlag = !!showFlag;},//关闭打印弹窗closePrintDialog:function(){this.showPrintDialog(false);},//打印初始化initLodop:function(){var self = this;setTimeout(function(){self.lodop = Print.getLodop();},1000)},//打印弹窗页码handleCurrentChange:function(pageNo){var self = this;this.getPrintList(pageNo);},//点击打印按钮printFun:function(){var self = this;this.printDialog.pageNo = 1;this.getPrintBaseInfo(function(){self.getPrintList(self.printDialog.pageNo);self.showPrintDialog(true);});},//直接打印print: function() {this.creatPintBill();this.lodop && this.lodop.PRINT();},//打印维护printSetup:function(){this.creatPintBill();this.lodop && this.lodop.PRINT_SETUP();},//打印预览printPriew:function(){this.creatPintBill();this.lodop && this.lodop.PREVIEW();},getPrintBaseInfo:function(callback){var self = this;this.getdata("/接口，返回基本信息，如背景图",{outboundId:this.outboundId},function(res){if(res.code ==200){self.printDialog.printBaseInfo = res.data;if(typeof callback=="function"){callback();}}},function(){},'get')},getPrintList:function(pageNo, callback){var self = this;this.getdata("/接口，返回数据",{outboundId:this.outboundId,pageSize: this.printDialog.pageSize,pageNo: pageNo},function(res){if(res.code ==200){self.printDialog.printList = res.data;self.printDialog.total = res.kv && res.kv.total;if(typeof callback=="function"){callback();}}},function(){ },'get')},creatPintBill: function() {if(!this.lodop){return;}var baseInfo = this.printDialog.printBaseInfo;var arr = this.printDialog.printList;var url = "<img src='"+baseInfo.url+"'>";var initListTopPosition = 128;var rowHeight = 37;var printPageSize = 5;try{eval(baseInfo.printTemplateVO.template);}catch(e){//TODO handle the exception}return;//下面这些是发给后端的打印样式规则，存到 res.data.template里面，这也是为什么前面调用它的原因//放到这里是怕忘了，前面有个return 可以防止重复执行这段天书似的代码//下面有一张图，那里面可以生成现成的样式代码。this.lodop.PRINT_INIT(baseInfo.printTemplateVO.name);//名字this.lodop.SET_PRINT_STYLEA(0,"ContentVName","baseInfo.printTemplateVO.name");this.lodop.SET_PRINT_MODE("POS_BASEON_PAPER",true);this.lodop.ADD_PRINT_SETUP_BKIMG(url);//添加urlthis.lodop.SET_PRINT_STYLEA(0,"ContentVName","url");//这个是定义url变量this.lodop.SET_SHOW_MODE("BKIMG_LEFT",0);this.lodop.SET_SHOW_MODE("BKIMG_TOP",0);this.lodop.SET_SHOW_MODE("BKIMG_WIDTH",baseInfo.printTemplateVO.width);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","baseInfo.printTemplateVO.width");this.lodop.SET_SHOW_MODE("BKIMG_HEIGHT",baseInfo.printTemplateVO.height);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","baseInfo.printTemplateVO.height");this.lodop.SET_SHOW_MODE("BKIMG_IN_PREVIEW",true);this.lodop.ADD_PRINT_TEXT(71,129,194,19, baseInfo.receivingDeptName);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","baseInfo.receivingDeptName");this.lodop.ADD_PRINT_TEXT(71,390,95,19, baseInfo.outboundDate);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","baseInfo.outboundDate");this.lodop.ADD_PRINT_TEXT(71,592,115,19, baseInfo.outboundNo);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","baseInfo.outboundNo");this.lodop.ADD_PRINT_TEXT(306,227,258,22,baseInfo.totalAmountCN);this.lodop.SET_PRINT_STYLEA(0,"Alignment",2);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","baseInfo.totalAmountCN");this.lodop.ADD_PRINT_TEXT(306,511,78,22,baseInfo.totalAmount);this.lodop.SET_PRINT_STYLEA(0,"Alignment",2);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","baseInfo.totalAmount");for(var index =0; index < arr.length;index++){this.createBillRow(initListTopPosition+ rowHeight*index, arr, index);}},createBillRow: function(initTop, arr, index) {this.lodop.ADD_PRINT_TEXT(initTop,66,135,22,arr[index].assetName);this.lodop.SET_PRINT_STYLEA(0,"Alignment",2);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","arr[index].assetName");this.lodop.ADD_PRINT_TEXT(initTop,208,135,22,arr[index].model);this.lodop.SET_PRINT_STYLEA(0,"Alignment",2);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","arr[index].model");this.lodop.ADD_PRINT_TEXT(initTop,350,35,22,arr[index].measurementUnit);this.lodop.SET_PRINT_STYLEA(0,"Alignment",2);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","arr[index].measurementUnit");this.lodop.ADD_PRINT_TEXT(initTop,384,49,22,arr[index].inboundNumber);this.lodop.SET_PRINT_STYLEA(0,"Alignment",2);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","arr[index].inboundNumber");this.lodop.ADD_PRINT_TEXT(initTop,435,74,22,arr[index].inboundPrice);this.lodop.SET_PRINT_STYLEA(0,"Alignment",2);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","arr[index].inboundPrice");this.lodop.ADD_PRINT_TEXT(initTop,512,76,22,arr[index].inboundAmount);this.lodop.SET_PRINT_STYLEA(0,"Alignment",2);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","arr[index].inboundAmount");this.lodop.ADD_PRINT_TEXT(initTop,594,124,22,arr[index].comments);this.lodop.SET_PRINT_STYLEA(0,"Alignment",2);this.lodop.SET_PRINT_STYLEA(0,"ContentVName","arr[index].comments");},//封装AJAX请求getdata:function(url, postdata, sfunc, efunc, type) {var self = this;if(!postdata) {postdata = {};}$.ajax({type: type ? type : "get",url: baseUrl + url,data: postdata,dataType: "json",traditional:true,beforeSend: function(xhr) {self.startLoading();},success: function(msg) {$(document).ajaxStop(function(){self.endLoading();});if(sfunc) {sfunc(msg);}},error: function(msg) {if(efunc) {efunc(msg);}}});},
生成代码的地方，点击图上所知位置，有一个生成代码的一项，如下图：
