vue+lodop实现证书套打

1.vue文件中页面展示部分的代码

 <template>
 <div>
    <footer>
　　　　//打印按钮，调用js方法
      <el-button style="margin-left: 20px;margin-top: 10px" @click="prn_preview1" type="primary">打印</el-button>
　　　　//给页面展示的字段位置坐了配置，这里可以写死也可以使用配置的位置

      <el-button style="margin-left: 20px;margin-top: 10px" @click="Dialog" type="primary" v-if="pzbtn">配置</el-button>
    </footer>
    
    <div style="position: relative">
      <img src="@/assets/images/背景图片.png" style="width: 1048px;height: 744px">
      <div style="position: absolute;top: 217px;left: 310px;font-size: 12px">{{permitEntity.xkzwh}}</div>
    <!-- <div id="h" style="position: absolute;top: 247px;left: 340px;">{{permitEntity.xkzwh}}</div>-->
      <div style="position: absolute;top: 533px;left: 319px;">{{permitEntity.xkzfzjg}}</div>
      <div style="position: absolute;top: 575px;left: 319px;">{{ permitEntity.xkzfzsj | getUseTime}}</div>
      <div style="position: absolute;top: 82px;left: 740px;max-width: 245px;">{{permitEntity.jsdw}}</div>
      <div style="position: absolute;top: 122px;left: 740px;max-width: 245px;">{{permitEntity.jsxmmc}}</div>
      <div style="position: absolute;top: 150px;left: 740px;max-width: 245px;">{{permitEntity.jswz}}</div>
      <div style="position: absolute;top: 205px;left: 740px;max-width: 245px;">{{permitEntity.jsgm}}</div>
      <div style="position: absolute;top: 248px;left: 740px;max-width: 355px;">{{permitEntity.ftjfjmc}}</div>
    </div>
    <el-dialog title="字段位置配置" :visible.sync="zsDialog" :close-on-click-modal="false" append-to-body width="80%">
      <el-form ref="existingbuildingEntity" :model="ConstructionEntity" label-width="140px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="许可证文号上："
                          >
              <el-input v-model="ConstructionEntity.xkzwhs"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="许可证文号左："
                         >
              <el-input v-model="ConstructionEntity.xkzwhz"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="许可证文号字体："
            >
              <el-input v-model="ConstructionEntity.xkzwhzt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="发证机关上："
                          >
              <el-input v-model="ConstructionEntity.xkzfzjgs"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发证机关左：">
              <el-input v-model="ConstructionEntity.xkzfzjgz"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="发证时间上："
            >
              <el-input v-model="ConstructionEntity.xkzfzsjs"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发证时间左：">
              <el-input v-model="ConstructionEntity.xkzfzsjz"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="建设单位上："
            >
              <el-input v-model="ConstructionEntity.jsdws"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建设单位左：">
              <el-input v-model="ConstructionEntity.jsdwz"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="建设项目名称上："
            >
              <el-input v-model="ConstructionEntity.jsxmmcs"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建设项目名称左：">
              <el-input v-model="ConstructionEntity.jsxmmcz"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="建设位置上："
            >
              <el-input v-model="ConstructionEntity.jswzs"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建设位置左：">
              <el-input v-model="ConstructionEntity.jswzz"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="建设规模上："
            >
              <el-input v-model="ConstructionEntity.jsgms"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建设规模左：">
              <el-input v-model="ConstructionEntity.jsgmz"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="附图附件上："
            >
              <el-input v-model="ConstructionEntity.ftjfjmcs"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="附图附件左：">
              <el-input v-model="ConstructionEntity.ftjfjmcz"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="zsDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveCer">保存</el-button>
            </span>
    </el-dialog>
  </div>
</template>

2.vue文件中js代码

<script>
  //导入别人写好的一个js文件，固定写法，直接导入就行不用管它
  import {getLodop} from "@/utils/js/lodopFuncs"
  //import config from "@/api/platform_config";
  //导入保存页面上需要展示的信息的类
  import permitEntity from "@/domain/permitEntity.entity";
  //页面上字段位置保存的类
  import ConstructionEntity from "@/domain/ConstructionEntity.entity";
  //调后台接口的服务
  import permitService from "@/service/farmhouse/permit.service";
  export default {
    name: 'jsgcghxkz',
    data () {
      return {
        orbitUrl: '',
        //控制弹出层的显示
          zsDialog: false,
          jfbsm: this.$route.query.bizInstGuid,
       // LODOP: '', //声明为全局变量
       permitEntity: new permitEntity(),
       ConstructionEntity: new ConstructionEntity(),
       //从application中获取权限
      roleCodes:  localStorage.getItem("roleCodes"),
          //控制配置按钮的显示
      pzbtn: false,
      }
    },
    filters: {
　　//时间戳转化成年月日格式的时间
      getUseTime(params) {
        let date = new Date(params);
        var Y = date.getFullYear() + "年";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "月";
        var D = date.getDate() + "日";
         return Y + M + D;
      }
    },
    //页面一加载就执行
    mounted () {
      this.getPermitEntity();
      this.getConstructionEntity();
      this.price_tds = document.getElementsByClassName('price')
        for(var i=0;i<this.price_tds.length;i++) {
            var _price = (i+1)*10;
            this.price_tds[i].innerHTML=_price;
        }
      //判断登录人的权限
      var role = this.roleCodes.split(',');
        for(var i = 0; i< role.length; i++) {
            if(role[i] == 'gly') {
                this.pzbtn = true;
            }
        }
    },
    methods: {
      /*print1() {
            this.CreateOnePage();
            LODOP.PRINT();
       },

      printSet1() {
          this.CreateOnePage();
          //LODOP.PRINT_SETUP();
          LODOP.PRINT_DESIGN();
      },*/

        Dialog() {
            this.zsDialog = true;
        },
        //套打的方法
      prn_preview1() {
          this.CreateOnePage();
          //LODOP.SET_PREVIEW_WINDOW(1,0,0,0,0,"");
          LODOP.PREVIEW();
          //  LODOP.PREVIEW();
        // LODOP.PRINT();
        // LODOP.PRINT_SETUP();
      },
   CreateOnePage(){
      LODOP = getLodop();
　　　　//loop的所有方法
      // this.LODOP.PRINT_INITA(0,0,1748,1240,"打印控件功能演示_Lodop功能_整页缩放打印输出");
      //LODOP.ADD_PRINT_SETUP_BKIMG("C:\\Users\\Administrator\\Documents\\建设工程规划许可证.png");
       /*this.LODOP.ADD_PRINT_TEXT(244,425,185,30,this.permitEntity.xkzwh);
       this.LODOP.SET_PRINT_STYLEA(0,"FontSize",12);*/
      // 打印时包含背景图
       //LODOP.SET_SHOW_MODE("BKIMG_PRINT", true);
      //设置打印时的
      //DD_PRINT_TEXT(上面的距离,左边的距离,宽度,高度,文本内容)增加纯文本项
      // PRINT_INIT(strPrintTaskName)打印初始化
      // SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小 (1横向2竖向,宽度,高度,页面大小名称宽高都设置为0的时候才可以设置"A5","A4")
      // ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
      // ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
      // ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项(strHtml为html模板字符串)
      // ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
      // SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格
      // PREVIEW打印预览
      // PRINT直接打印
      // PRINT_SETUP打印维护
      // PRINT_DESIGN打印设计
       LODOP.ADD_PRINT_TEXT(this.ConstructionEntity.xkzwhs,this.ConstructionEntity.xkzwhz,220,40,this.permitEntity.xkzwh);
       LODOP.SET_PRINT_STYLEA(0,"FontSize",this.ConstructionEntity.xkzwhzt);
       
       LODOP.ADD_PRINT_TEXT(this.ConstructionEntity.xkzfzjgs,this.ConstructionEntity.xkzfzjgz,500,100,this.permitEntity.xkzfzjg);
       LODOP.SET_PRINT_STYLEA(0,"FontSize",16);
       
       LODOP.ADD_PRINT_TEXT(this.ConstructionEntity.xkzfzsjs,this.ConstructionEntity.xkzfzsjz,245,30,this.permitEntity.xkzfzsj);
       LODOP.SET_PRINT_STYLEA(0,"FontSize",16);
       
       LODOP.ADD_PRINT_TEXT(this.ConstructionEntity.jsdws,this.ConstructionEntity.jsdwz,416,31,this.permitEntity.jsdw);
       LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
       
       LODOP.ADD_PRINT_TEXT(this.ConstructionEntity.jswzs,this.ConstructionEntity.jswzz,416,31,this.permitEntity.jswz);
       LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
       
       LODOP.ADD_PRINT_TEXT(this.ConstructionEntity.jsxmmcs,this.ConstructionEntity.jsxmmcz,416,31,this.permitEntity.jsxmmc);
       LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
       
       LODOP.ADD_PRINT_TEXT(this.ConstructionEntity.jsgms,this.ConstructionEntity.jsgmz,416,31,this.permitEntity.jsgm);
       LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
       
       LODOP.ADD_PRINT_TEXT(this.ConstructionEntity.ftjfjmcs,this.ConstructionEntity.ftjfjmcz,586,197,this.permitEntity.ftjfjmc);
       LODOP.SET_PRINT_STYLEA(0,"FontSize",14);
  },
      //获取证书中的数据信息
      getPermitEntity() {
          permitService.getInfo(this.jfbsm).then(res => {
              if(res.status == "200") {
                  this.permitEntity = res.data;
              }
          })
      },
        //获取字段所在位置
        getConstructionEntity() {
            permitService.getConstruction().then(res => {
                if(res.status == "200") {
                    this.ConstructionEntity = res.data.constructionEntity;
                }
            })
        },
        //保存修改证书定位位置
        saveCer() {
          var certificateTemplateVo = {};
          certificateTemplateVo.constructionEntity = this.ConstructionEntity;
          permitService.SaveCer(certificateTemplateVo).then(res => {
              if(res.status == "200") {
                  this.$message({ message: "保存成功", type: "success" });
                  this.zsDialog = false;
              }
          })
        },
    }
  }
</script>

3.lodopFuncs文件中的代码，新建一个文件复制进去或者直接在网上找这个文件拿过来就可以使用

/**
 * Created by mamimi on 2018/11/14.
 */
var CreatedOKLodop7766 = null, CLodopIsLocal;

//====判断是否需要 Web打印服务CLodop:===
//===(不支持插件的浏览器版本需要用它)===
export function needCLodop() {
  try {
    var ua = navigator.userAgent;
    if (ua.match(/Windows\sPhone/i))
      return true;
    if (ua.match(/iPhone|iPod|iPad/i))
      return true;
    if (ua.match(/Android/i))
      return true;
    if (ua.match(/Edge\D?\d+/i))
      return true;

    var verTrident = ua.match(/Trident\D?\d+/i);
    var verIE = ua.match(/MSIE\D?\d+/i);
    var verOPR = ua.match(/OPR\D?\d+/i);
    var verFF = ua.match(/Firefox\D?\d+/i);
    var x64 = ua.match(/x64/i);
    if ((!verTrident) && (!verIE) && (x64))
      return true;
    else if (verFF) {
      verFF = verFF[0].match(/\d+/);
      if ((verFF[0] >= 41) || (x64))
        return true;
    } else if (verOPR) {
      verOPR = verOPR[0].match(/\d+/);
      if (verOPR[0] >= 32)
        return true;
    } else if ((!verTrident) && (!verIE)) {
      var verChrome = ua.match(/Chrome\D?\d+/i);
      if (verChrome) {
        verChrome = verChrome[0].match(/\d+/);
        if (verChrome[0] >= 41)
          return true;
      }
    }
    return false;
  } catch (err) {
    return true;
  }
}

//====页面引用CLodop云打印必须的JS文件,用双端口(8000和18000）避免其中某个被占用：====
if (needCLodop()) {
  var src1 = "http://localhost:8000/CLodopfuncs.js?priority=1";
  var src2 = "http://localhost:18000/CLodopfuncs.js?priority=0";

  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
  var oscript = document.createElement("script");
  oscript.src = src1;
  head.insertBefore(oscript, head.firstChild);
  oscript = document.createElement("script");
  oscript.src = src2;
  head.insertBefore(oscript, head.firstChild);
  CLodopIsLocal = !!((src1 + src2).match(/\/\/localho|\/\/127.0.0./i));
}

//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT, oEMBED) {

  var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='/CLodop_Setup_for_Win64NT_3.091Extend.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
  var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='/CLodop_Setup_for_Win64NT_3.091Extend.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
  var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='/CLodop_Setup_for_Win64NT_3.091Extend.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
  var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='/CLodop_Setup_for_Win64NT_3.091Extend.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
  var strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
  var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
  var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='/web/static/CLodop_Setup_for_Win64NT_3.091Extend.exe' target='_self'>下载执行安装</a>";
  var strCLodopInstall_2 = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
  var strCLodopInstall_3 = "，成功后请刷新本页面。</font>";
  var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='/CLodop_Setup_for_Win64NT_3.091Extend.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
  var LODOP;
  try {
    var ua = navigator.userAgent;
    var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
    if (needCLodop()) {
      try {
        LODOP = getCLodop();
      } catch (err) {}
      if (!LODOP && document.readyState !== "complete") {
        alert("网页还没下载完毕，请稍等一下再操作.");
        return;
      }
      if (!LODOP) {
        document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
        return;
      } else {
        if (CLODOP.CVERSION < "3.0.6.0") {
          document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
        }
        if (oEMBED && oEMBED.parentNode)
          oEMBED.parentNode.removeChild(oEMBED);
        if (oOBJECT && oOBJECT.parentNode)
          oOBJECT.parentNode.removeChild(oOBJECT);
      }
    } else {
      var is64IE = isIE && !!(ua.match(/x64/i));
      //=====如果页面有Lodop就直接使用，没有则新建:==========
      if (oOBJECT || oEMBED) {
        if (isIE)
          LODOP = oOBJECT;
        else
          LODOP = oEMBED;
      } else if (!CreatedOKLodop7766) {
        LODOP = document.createElement("object");
        LODOP.setAttribute("width", 0);
        LODOP.setAttribute("height", 0);
        LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
        if (isIE)
          LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
        else
          LODOP.setAttribute("type", "application/x-print-lodop");
        document.documentElement.appendChild(LODOP);
        CreatedOKLodop7766 = LODOP;
      } else
        LODOP = CreatedOKLodop7766;
      //=====Lodop插件未安装时提示下载地址:==========
      if ((!LODOP) || (!LODOP.VERSION)) {
        if (ua.indexOf('Chrome') >= 0)
          document.body.innerHTML = strHtmChrome + document.body.innerHTML;
        if (ua.indexOf('Firefox') >= 0)
          document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
        document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
        return LODOP;
      }
    }
    if (LODOP.VERSION < "6.2.2.4") {
      if (!needCLodop())
        document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
      return LODOP;
    }
    //===如下空白位置适合调用统一功能(如注册语句、语言选择等):==


    LODOP.SET_LICENSES("","13528A153BAEE3A0254B9507DCDE2839","","");
    //=======================================================
    return LODOP;
  } catch (err) {
    alert("getLodop出错:" + err);
  }
}

工作学习之余，记录一下！如有雷同，纯属巧合