下載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);}}});},

生成代碼的地方，點擊圖上所知位置，有一個生成代碼的一項，如下圖：

總結

以上是生活随笔為你收集整理的lodop打印不显示页码_Lodop插件实现打印功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。