此控件直接進行打印底部會有水印，通過官網購買可以解決；如不想購買，可先執行預覽，彈出預覽框進行打印；需要用到的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(/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(以防其中一個被占):==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; } elseLODOP = 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); }}

到此這篇關于vue使用lodop打印控件實現瀏覽器兼容打印的文章就介紹到這了,更多相關vue瀏覽器兼容打印內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！