文章詳情頁

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

瀏覽：19日期：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. ASP.NET MVC使用Boostrap實現產品展示、查詢、排序、分頁2. vue 動態組件用法示例小結3. 基于Python模擬瀏覽器發送http請求4. 如何通過PHP實現Des加密算法代碼實例5. Spring基于advisor配置aop過程解析6. vue cli3.0打包上線靜態資源找不到路徑的解決操作7. 詳解ABP框架中的日志管理和設置管理的基本配置8. 解決idea中svn提交時performing vcs refresh時間很長的問題9. idea實現類快捷生成接口方法示例10. 使用python 計算百分位數實現數據分箱代碼

排行榜

					
					ASP.NET MVC使用Boostrap實現產品展示、查詢、排序、分頁
使用python 計算百分位數實現數據分箱代碼
Spring基于advisor配置aop過程解析
解決idea中svn提交時performing vcs refresh時間很長的問題
詳解ABP框架中的日志管理和設置管理的基本配置
如何通過PHP實現Des加密算法代碼實例
vue cli3.0打包上線靜態資源找不到路徑的解決操作
vue 動態組件用法示例小結
idea實現類快捷生成接口方法示例
基于Python模擬瀏覽器發送http請求
ASP.NET MVC使用JSAjaxFileUploader插件實現單文件上傳
				