文章詳情頁

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

瀏覽：69日期：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. docker鏡像完全卸載的操作步驟2. IntelliJ IDEA導入jar包的方法3. idea刪除項目的操作方法4. 使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細教程5. IntelliJ IDEA配置Tomcat服務器的方法6. idea打開多個窗口的操作方法7. idea重置默認配置的方法步驟8. IntelliJ IDEA調整字體大小的方法9. IntelliJ IDEA安裝插件的方法步驟10. IntelliJ IDEA設置默認瀏覽器的方法

排行榜

					
					docker鏡像完全卸載的操作步驟
IntelliJ IDEA導入jar包的方法
使用Maven 搭建 Spring MVC 本地部署Tomcat的詳細教程
IntelliJ IDEA配置Tomcat服務器的方法
idea刪除項目的操作方法
IntelliJ IDEA恢復刪除文件的方法
IntelliJ IDEA調整字體大小的方法
IntelliJ IDEA設置默認瀏覽器的方法
IntelliJ IDEA安裝插件的方法步驟
idea打開多個窗口的操作方法
Docker 部署 Prometheus的安裝詳細教程
				