此控件直接進(jìn)行打印底部會(huì)有水印，通過(guò)官網(wǎng)購(gòu)買(mǎi)可以解決；如不想購(gòu)買(mǎi)，可先執(zhí)行預(yù)覽，彈出預(yù)覽框進(jìn)行打印；需要用到的js文件和api文檔附后，請(qǐng)注意查看。首先需要在局部或全局引入LodopFuncs.js文件import {getLodop} from ’../../../components/js/LodopFuncs’

方法中調(diào)用

print(){ let LODOP = getLodop(); LODOP.PRINT_INITA(0,0,800,1600,'打印庫(kù)位名稱'); LODOP.SET_PRINT_PAGESIZE(1,700,500,'') //設(shè)定紙張大小 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);//二維碼樣式和規(guī)則 LODOP.SET_PRINTER_INDEXA('TSC TTP-244 Pro');//選擇打印機(jī) // LODOP.PRINT_DESIGN()//打開(kāi)設(shè)置 // LODOP.PREVIEW(); //預(yù)覽 LODOP.PRINT() //直接打印 },

LodopFuncs.js文件

//==本JS是加載Lodop插件及CLodop服務(wù)的綜合示例，可直接使用，建議看懂后融進(jìn)自己頁(yè)面程序==var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;//==判斷是否需要CLodop(那些不支持插件的瀏覽器):==export function needCLodop() { try { var ua = navigator.userAgent; if (ua.match(/WindowssPhone/i)) return true; if (ua.match(/iPhone|iPod|iPad/i)) return true; if (ua.match(/Android/i)) return true; if (ua.match(/EdgeD?d+/i)) return true; var verTrident = ua.match(/TridentD?d+/i); var verIE = ua.match(/MSIED?d+/i); var verOPR = ua.match(/OPRD?d+/i); var verFF = ua.match(/FirefoxD?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(/ChromeD?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(以防其中一個(gè)被占):==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對(duì)象主過(guò)程,判斷是否安裝、需否升級(jí):==export function getLodop(oOBJECT, oEMBED) { var strHtmInstall = '<br><font color=’#FF00FF’>打印控件未安裝!點(diǎn)擊這里<a href=’https://wms.warehousing.com/download/install_lodop32.exe’ target=’_self’>執(zhí)行安裝</a>,安裝后請(qǐng)刷新頁(yè)面或重新進(jìn)入。</font>'; var strHtmUpdate = '<br><font color=’#FF00FF’>打印控件需要升級(jí)!點(diǎn)擊這里<a href=’https://wms.warehousing.com/download/install_lodop32.exe’ target=’_self’>執(zhí)行升級(jí)</a>,升級(jí)后請(qǐng)重新進(jìn)入。</font>'; var strHtm64_Install = '<br><font color=’#FF00FF’>打印控件未安裝!點(diǎn)擊這里<a href=’https://wms.warehousing.com/download/install_lodop64.exe’ target=’_self’>執(zhí)行安裝</a>,安裝后請(qǐng)刷新頁(yè)面或重新進(jìn)入。</font>'; var strHtm64_Update = '<br><font color=’#FF00FF’>打印控件需要升級(jí)!點(diǎn)擊這里<a href=’https://wms.warehousing.com/download/install_lodop64.exe’ target=’_self’>執(zhí)行升級(jí)</a>,升級(jí)后請(qǐng)重新進(jìn)入。</font>'; var strHtmFireFox = '<br><br><font color=’#FF00FF’>（注意：如曾安裝過(guò)Lodop舊版附件npActiveXPLugin,請(qǐng)?jiān)凇竟ぞ摺?>【附加組件】->【擴(kuò)展】中先卸它）</font>'; var strHtmChrome = '<br><br><font color=’#FF00FF’>(如果此前正常，僅因?yàn)g覽器升級(jí)或重安裝而出問(wèn)題，需重新執(zhí)行以上安裝）</font>'; var strCLodopInstall_1 = '<br><font color=’#FF00FF’>Web打印服務(wù)CLodop未安裝啟動(dòng)，點(diǎn)擊這里<a href=’https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe’ target=’_self’>下載執(zhí)行安裝</a>'; var strCLodopInstall_2 = '<br>（若此前已安裝過(guò)，可<a href=’https://wms.warehousing.com/download/CLodop.protocol:setup’ target=’_self’>點(diǎn)這里直接再次啟動(dòng)</a>）'; var strCLodopInstall_3 = '，成功后請(qǐng)刷新本頁(yè)面。</font>'; var strCLodopUpdate = '<br><font color=’#FF00FF’>Web打印服務(wù)CLodop需升級(jí)!點(diǎn)擊這里<a href=’https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe’ target=’_self’>執(zhí)行升級(jí)</a>,升級(jí)后請(qǐng)刷新頁(yè)面。</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('網(wǎng)頁(yè)還沒(méi)下載完畢，請(qǐng)稍等一下再操作.');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)); //==如果頁(yè)面有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; } elseLODOP = CreatedOKLodopObject; //==Lodop插件未安裝時(shí)提示下載地址:== 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; } //===如下空白位置適合調(diào)用統(tǒng)一功能(如注冊(cè)語(yǔ)句、語(yǔ)言選擇等):== //======================================================= return LODOP; } catch (err) { alert('getLodop出錯(cuò):' + err); }}

到此這篇關(guān)于vue使用lodop打印控件實(shí)現(xiàn)瀏覽器兼容打印的文章就介紹到這了,更多相關(guān)vue瀏覽器兼容打印內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！