lodop打印不显示页码_Lodop插件实现打印功能

下载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"
		fit
		style="width: 100%"
         >
		<el-table-column
			prop="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);//添加url
    this.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);
      }
   }
   });
 },

生成代码的地方，点击图上所知位置，有一个生成代码的一项，如下图：