文章詳情頁

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

瀏覽：84日期：2022-10-06 08:21:41

前言

此控件直接進行打印底部會有水印，通過官網購買可以解決；如不想購買，可先執行預覽，彈出預覽框進行打?。恍枰玫降膉s文件和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 = ' 打印控件未安裝!點擊這里<a href=’https://wms.warehousing.com/download/install_lodop32.exe’ target=’_self’>執行安裝</a>,安裝后請刷新頁面或重新進入。'; var strHtmUpdate = ' 打印控件需要升級!點擊這里<a href=’https://wms.warehousing.com/download/install_lodop32.exe’ target=’_self’>執行升級</a>,升級后請重新進入。'; var strHtm64_Install = ' 打印控件未安裝!點擊這里<a href=’https://wms.warehousing.com/download/install_lodop64.exe’ target=’_self’>執行安裝</a>,安裝后請刷新頁面或重新進入。'; var strHtm64_Update = ' 打印控件需要升級!點擊這里<a href=’https://wms.warehousing.com/download/install_lodop64.exe’ target=’_self’>執行升級</a>,升級后請重新進入。'; var strHtmFireFox = ' （注意：如曾安裝過Lodop舊版附件npActiveXPLugin,請在【工具】->【附加組件】->【擴展】中先卸它）'; var strHtmChrome = ' (如果此前正常，僅因瀏覽器升級或重安裝而出問題，需重新執行以上安裝）'; var strCLodopInstall_1 = ' Web打印服務CLodop未安裝啟動，點擊這里<a href=’https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe’ target=’_self’>下載執行安裝</a>'; var strCLodopInstall_2 = ' （若此前已安裝過，可<a href=’https://wms.warehousing.com/download/CLodop.protocol:setup’ target=’_self’>點這里直接再次啟動</a>）'; var strCLodopInstall_3 = '，成功后請刷新本頁面。'; var strCLodopUpdate = ' Web打印服務CLodop需升級!點擊這里<a href=’https://wms.warehousing.com/download/CLodop_Setup_for_Win32NT.exe’ target=’_self’>執行升級</a>,升級后請刷新頁面。'; 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瀏覽器兼容打印內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！

Vue

上一條：Vue中使用wangeditor富文本編輯的問題下一條：vue如何使用rem適配

相關文章：

1. PHP循環與分支知識點梳理2. 怎樣才能用js生成xmldom對象，并且在firefox中也實現xml數據島？3. 概述IE和SQL2k開發一個XML聊天程序4. ASP的Global.asa文件技巧用法5. CSS3使用過度動畫和緩動效果案例講解6. XML入門精解之結構與語法7. XHTML 1.0：標記新的開端8. XML解析錯誤：未組織好的解決辦法9. 簡單了解XML 樹結構10. ASP中實現字符部位類似.NET里String對象的PadLeft和PadRight函數

排行榜

					
					Yii2.0引入CSS,JS文件方法
Java GZip 基于內存實現壓縮和解壓的方法
php+ajax實現文件切割上傳功能示例
Android中SeekBar拖動條使用方法詳解
Android nativePollOnce函數解析
python 使用tkinter+you-get實現視頻下載器
PHP基礎之函數2——函數參數
ASP.NET MVC通過勾選checkbox更改select的內容
XML解析錯誤：未組織好 的解決辦法
Java基于redis和mysql實現簡單的秒殺(附demo)
spring解決循環依賴的簡單方法
				