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);
  }
}

工作學習之余，記錄一下！如有雷同，純屬巧合