使用LODOP打印控件实现打印功能的解决方案 |
您所在的位置：网站首页 › 请先安装打印机插件什么意思 › 使用LODOP打印控件实现打印功能的解决方案 |
|
项目中有很多打印功能，一开始使用浏览器自带的打印功能，发现在不同的浏览打印效果上有着较大的差异，最终选择了LODOP打印控件来实现，记录下实现的大体思路。
1. LODOP的优势：
功能丰富：LODOP控件可以实现各种打印功能，如文字、图片、表格等，而且可以自定义页面大小、边距等参数。 易于使用：LODOP控件提供了简单易懂的API接口，使得应用程序开发者可以快速上手并实现需要的打印功能。 可定制性强：LODOP控件支持自定义纸张大小和分页设置，并且可以添加水印、背景等效果。 支持多种浏览器：LODOP控件支持多种主流浏览器，如IE、Chrome、Firefox等。 多语言支持：LODOP控件支持中文、英文等多种语言。 占用资源少：LODOP控件使用JavaScript实现，占用资源小，不会对系统造成负荷。 兼容性好：LODOP控件适用于各个操作系统，如Windows、Linux等。 安全防护：LODOP控件提供了完善的安全措施，如数字签名、加密功能等，确保用户数据的安全性。 2. 假设你电脑上已经安装了LODOP打印软件(下载LODOP)，那么在项目中将这段代码放到一个js文件里 // lodopUtils.js var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState; //判断是否需要CLodop(那些不支持插件的浏览器) function needCLodop() { try { var ua = navigator.userAgent; if (ua.match(/Windows\sPhone/i)) return true; if (ua.match(/iPhone|iPod|iPad/i)) return true; if (ua.match(/Android/i)) return true; if (ua.match(/Edge\D?\d+/i)) return true; var verTrident = ua.match(/Trident\D?\d+/i); var verIE = ua.match(/MSIE\D?\d+/i); var verOPR = ua.match(/OPR\D?\d+/i); var verFF = ua.match(/Firefox\D?\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(/Chrome\D?\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(以防其中一个被占) function loadCLodop() { if (CLodopJsState == "loading" || CLodopJsState == "complete") return; CLodopJsState = "loading"; var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement; var JS1 = document.createElement("script"); var JS2 = document.createElement("script"); JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1"; JS2.src = "http://localhost:18000/CLodopfuncs.js"; JS1.onload = JS2.onload = function() {CLodopJsState = "complete";} // eslint-disable-next-line no-unused-vars JS1.onerror = JS2.onerror = function(evt) {CLodopJsState = "complete";} head.insertBefore(JS1, head.firstChild); head.insertBefore(JS2, head.firstChild); CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i)); } //加载 if (needCLodop()){loadCLodop();} //获取LODOP对象主过程,判断是否安装、需否升级 function getLodop(oOBJECT, oEMBED) { var LODOP; try { var ua = navigator.userAgent; var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i)); if (needCLodop()) { try { // eslint-disable-next-line no-undef LODOP = getCLodop(); // eslint-disable-next-line no-empty } catch (err) {} if (!LODOP && CLodopJsState !== "complete") { if (CLodopJsState == "loading") alert("网页还没下载完毕，请稍等一下再操作."); else alert("没有加载CLodop的主js，请先调用loadCLodop过程."); return; } if (!LODOP) { // eslint-disable-next-line no-undef document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML; return; } else { // eslint-disable-next-line no-undef if (CLODOP.CVERSION 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:2123C269-1E0C-4534-8141-A75355220B4CL"); else LODOP.setAttribute("type", "application/x-print-lodop"); document.documentElement.appendChild(LODOP); CreatedOKLodopObject = LODOP } else LODOP = CreatedOKLodopObject; //Lodop插件未安装时提示下载地址 if ((!LODOP) || (!LODOP.VERSION)) { if (ua.indexOf('Chrome') >= 0) // eslint-disable-next-line no-undef document.body.innerHTML = strHtmChrome + document.body.innerHTML; if (ua.indexOf('Firefox') >= 0) // eslint-disable-next-line no-undef document.body.innerHTML = strHtmFireFox + document.body.innerHTML; // eslint-disable-next-line no-undef document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML; return LODOP; } } if (LODOP.VERSION alert("getLodop出错:" + err); } } export {getLodop}; 3.在需要打印的地方调用getLodop（）方法获取lodop对象，可以设置打印内容的样式 打印 import {getLodop} from "../lodopUtils.js"; // 打印 print(){ // 此处是需要打印的地方，可用id或者用ref标记 let printContent = document.getElementById("printContent").innerHTML; let LODOP = getLodop(); //打印初始化 LODOP.PRINT_INITA(0, 0, '297mm', '210mm', '打印任务1'); //设定纸张大小 LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A4'); //设置NP插件无返回，这可避免chrome（谷歌）等np插件浏览器对弹窗超时误报崩溃。 LODOP.SET_SHOW_MODE('NP_NO_RESULT', true); //1横向，2纵向 LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 2); // 可以自定义打印时的样式 LODOP.ADD_PRINT_HTM( "15mm", "12mm", "92%", "90%", this.setPrintStyle() + printContent ); // 固定位置输出页码 LODOP.ADD_PRINT_HTM(1050,320,300,100,"第##页/共##页"); // 标识每页都输出 LODOP.SET_PRINT_STYLEA(0,"ItemType",1); // 预览 LODOP.PREVIEW(); // 直接打印使用 //LODOP.PRINT(); }, // 可自定义打印样式 setPrintStyle() { let cssHtml = '' + '* {' + 'margin: 0;padding: 0;outline: none;list-style: none;text-decoration: none;' + '}' + 'table {text-align:center;border-collapse:collapse;border:0;font-size:16px!important;font-family:\'仿宋\' !important;border: 1px solid black;}' + 'table thead,table tfoot{height:0px}' + 'table thead tr, table tfoot tr{height:0px}' + 'table tr,th,td{border: 1px solid black;}' + '.head {font-size: 24;text-align: center; padding-bottom: 5px;font-family: \'黑体\' !important;}' + 'caption {padding-bottom:5px;}' + '.main {width: 100%}' + ''; return cssHtml; },至此，就可以实现打印了，开发过程中有什么问题可以评论留言或者私信我啊！！！ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |