文章詳情頁

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

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

前言

此控件直接進行打印底部會有水印，通過官網購買可以解決；如不想購買，可先執行預覽，彈出預覽框進行打印；需要用到的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 = ' 打印控件未安裝!點擊這里<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. 使用Hangfire+.NET 6實現定時任務管理(推薦)2. Xml簡介_動力節點Java學院整理3. 如何在jsp界面中插入圖片4. jsp實現登錄驗證的過濾器5. phpstudy apache開啟ssi使用詳解6. JSP之表單提交get和post的區別詳解及實例7. jsp文件下載功能實現代碼8. 詳解瀏覽器的緩存機制9. vue3+ts+elementPLus實現v-preview指令10. xml中的空格之完全解說

排行榜

					
					phpstudy apache開啟ssi使用詳解
JavaScript判斷數據類型有幾種方法及區別介紹
python中HTMLParser模塊知識點總結
.Net加密神器Eazfuscator.NET?2023.2?最新版使用教程
PHP擴展之圖像處理1——GD庫使用及相關函數
Java中將File轉化為MultipartFile的操作
如何基于python3和Vue實現AES數據加密
PHP遠程調用以及RPC框架
SSM框架整合之Spring+SpringMVC+MyBatis實踐步驟
詳解Python openpyxl庫的基本應用
Python在字符串中處理html和xml的方法
				