vue使用lodop打印插件

首先將lodop安裝包放到static下

下載地址：http://www.c-lodop.com/download.html

新建一個vue測試lodop功能

LodopFuncs.js

var CreatedOKLodop7766 = null,
    CLodopIsLocal;

//====判斷是否需要 Web打印服務CLodop:===
//===(不支持插件的瀏覽器版本需要用它)===
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對象的主過程：====
function getLodop(oOBJECT, oEMBED) {
  var strHtmInstall =
    "<br><font color='#FF00FF'>打印控件未安裝!點擊這裏<a href='/static/lodop/install_lodop32.exe' download='install_lodop32.exe' target='_self'>執行安裝</a>,安裝後請刷新頁面或重新進入。</font>";
  var strHtmUpdate =
    "<br><font color='#FF00FF'>打印控件需要升級!點擊這裏<a href='/static/lodop/install_lodop32.exe' download='install_lodop32.exe' target='_self'>執行升級</a>,升級後請重新進入。</font>";
  var strHtm64_Install =
    "<br><font color='#FF00FF'>打印控件未安裝!點擊這裏<a href='/static/lodop/install_lodop64.exe' download='install_lodop64.exe' target='_self'>執行安裝</a>,安裝後請刷新頁面或重新進入。</font>";
  var strHtm64_Update =
    "<br><font color='#FF00FF'>打印控件需要升級!點擊這裏<a href='/static/lodop/install_lodop64.exe' download='install_lodop64.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='/static/lodop/CLodop_Setup_for_Win32NT.exe' download='CLodop_Setup_for_Win32NT.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='/static/lodop/CLodop_Setup_for_Win32NT.exe' download='CLodop_Setup_for_Win32NT.exe' target='_self'>執行升級</a>,升級後請刷新頁面。</font>";
  var LODOP;
  var lodopMessage = "";
  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") {
        return { lodopMessage: "網頁還沒下載完畢，請稍等一下再操作." };
      }
      if (!LODOP) {
        lodopMessage =
          strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + lodopMessage;
        return { lodopMessage };
      } else {
        if (CLODOP.CVERSION < "3.0.8.3") {
          lodopMessage = strCLodopUpdate + lodopMessage;
        }
        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) lodopMessage = strHtmChrome + lodopMessage;
        if (ua.indexOf("Firefox") >= 0) lodopMessage = strHtmFireFox + lodopMessage;
        lodopMessage = (is64IE ? strHtm64_Install : strHtmInstall) + lodopMessage;
        return { LODOP, lodopMessage };
      }
    }
    if (LODOP.VERSION < "6.2.2.6") {
      if (!needCLodop()) lodopMessage = (is64IE ? strHtm64_Update : strHtmUpdate) + lodopMessage;
    }
    //===如下空白位置適合調用統一功能(如註冊語句、語言選擇等):==
    LODOP.SET_LICENSES("ljq", "", "", "");

    //=======================================================
    return { LODOP: LODOP, lodopMessage: lodopMessage };
  } catch (err) {
    return { lodopMessage: "getLodop出錯" + err };
  }
}

export {
  getLodop
}

lodopPrint.vue引用

<template>
    <div>
      <el-button type="primary" @click="lodopPrint">lodop打印</el-button>
    </div>
</template>

<script>
    import {getLodop} from './LodopFuncs';
    export default {
        name: "lodopPrint",
      methods:{
        lodopPrint(){
          var { LODOP, lodopMessage } = getLodop();
          if (lodopMessage) {
            this.$alert(lodopMessage, 'LODOP啓動錯誤', {
              dangerouslyUseHTMLString: true
            });
          }
          //打印初始化
          LODOP.PRINT_INIT("");
          //設置紙張大小（橫向打印，寬0，高0，A4紙張）
          LODOP.SET_PRINT_PAGESIZE(2,0,0,"A4");
          //新建頁
          LODOP.NEWPAGE();
          //學生課表頭
          //字體大小
          LODOP.SET_PRINT_STYLE("FontSize", 13);
          //是否粗體
          LODOP.SET_PRINT_STYLE("Bold", 1);
          //打印頭部標題內容
          LODOP.ADD_PRINT_TEXT(10,390,300,10,"測試Lodop");
          LODOP.PREVIEW();
        }
      },
    }
</script>

<style scoped>

</style>

測試結果：

居然要打印的內容可以參考lodop技術手冊

http://www.c-lodop.com/download/Lodop6.2NoteBook20181130.zip