vue使用lodop打印控件實現瀏覽器兼容打印

前言

• 此控件直接進行打印底部會有水印，通過官網購買可以解決；
• 如不想購買，可先執行預覽，彈出預覽框進行打印；
• 需要用到的js文件和api文檔附后，請注意查看。

首先需要在局部或全局引入LodopFuncs.js文件

import {getLodop} from '../../../components/js/LodopFuncs'

方法中調用

print(){
      let LODOP = getLodop();
      LODOP.PRINT_INITA(0,0,800,1600,"打印庫位名稱");
      LODOP.SET_PRINT_PAGESIZE(1,700,500,"")  //設定紙張大小
        LODOP.NewPage();//初始化
        LODOP.SET_PRINT_MODE("RESELECT_PRINTER",true);
        LODOP.ADD_PRINT_TEXT('10mm','50mm','30mm','20mm','iphone20Plus');//打印文字
        LODOP.SET_PRINT_STYLEA(0,"FontSize",30);//字體樣式
        LODOP.ADD_PRINT_LINE('10mm','35mm','40mm','35mm',0,1);//打印直線
        LODOP.ADD_PRINT_BARCODE('10mm','2.5mm','35mm','35mm',"QRCode",'123456');//打印二維碼
        LODOP.SET_PRINT_STYLEA(0,"AlignJustify",2);//二維碼樣式和規則
        LODOP.SET_PRINTER_INDEXA("TSC TTP-244 Pro");//選擇打印機
      // LODOP.PRINT_DESIGN()//打開設置
      // LODOP.PREVIEW(); //預覽
        LODOP.PRINT()  //直接打印
    },

LodopFuncs.js文件

//==本JS是加載Lodop插件及CLodop服務的綜合示例，可直接使用，建議看懂后融進自己頁面程序==

var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;


//==判斷是否需要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 head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    
    var JS1 = document.createElement("script");
    JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
    head.insertBefore(JS1, head.firstChild);

    var JS2 = document.createElement("script");
    JS2.src = "http://localhost:18000/CLodopfuncs.js?priority=0";
    head.insertBefore(JS2, head.firstChild);

    CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));

    if (JS1.attachEvent) {
    	CLodopJsState = "loading";
        var onChange = function(){ 
	     if (window.event.srcElement.readyState == 'loaded')               
	     CLodopJsState = "complete";
	};
	JS1.attachEvent('onreadystatechange',onChange);
	JS2.attachEvent('onreadystatechange',onChange);
    }
}

//==獲取LODOP對象主過程,判斷是否安裝、需否升級:==
export function getLodop(oOBJECT, oEMBED) {
    var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安裝!點擊這里<a href='https://wms.warehousing.com/download/install_lodop32.exe' target='_self'>執行安裝</a>,安裝后請刷新頁面或重新進入。</font>";
    var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升級!點擊這里<a href='https://wms.warehousing.com/download/install_lodop32.exe' target='_self'>執行升級</a>,升級后請重新進入。</font>";
    var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安裝!點擊這里<a href='https://wms.warehousing.com/download/install_lodop64.exe' target='_self'>執行安裝</a>,安裝后請刷新頁面或重新進入。</font>";
    var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升級!點擊這里<a href='https://wms.warehousing.com/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='https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe' target='_self'>下載執行安裝</a>";
    var strCLodopInstall_2 = "<br>（若此前已安裝過，可<a href='https://wms.warehousing.com/download/CLodop.protocol:setup' target='_self'>點這里直接再次啟動</a>）";
    var strCLodopInstall_3 = "，成功后請刷新本頁面。</font>";
    var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服務CLodop需升級!點擊這里<a href='https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.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" || (isIE  && CLodopJsState == "loading")) ) {
                alert("網頁還沒下載完畢，請稍等一下再操作.");
                return;
            }
            if (!LODOP) {
                document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;                
                return;
            } else {
                if (CLODOP.CVERSION < "3.0.9.3") {
                    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 (!CreatedOKLodopObject) {
                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);
                CreatedOKLodopObject = LODOP;
            } else
                LODOP = CreatedOKLodopObject;
            //==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.6") {
            if (!needCLodop())
                document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
        }
        //===如下空白位置適合調用統一功能(如注冊語句、語言選擇等):==



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

lodop技術手冊

點擊下載 提取碼：khc8