1. 首页首页
  2. 科技前沿科技前沿

2025年使用LODOP打印控件实现打印功能的解决方案

科技前沿 • • 阅读 15

使用LODOP打印控件实现打印功能的解决方案项目中有很多打印功能 一开始使用浏览器自带的打印功能 发现在不同的浏览打印效果上有着较大的差异 最终选择了 LODOP 打印控件来实现 记录下实现的大体思路 1 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 < "4.1.2.3") { 
    // eslint-disable-next-line no-undef 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:2123C269-1E0C-4534-8141-AB4CL"); 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 < "6.2.2.6") { 
    if (!needCLodop()) // eslint-disable-next-line no-undef document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML; } return LODOP; } catch (err) { 
    alert("getLodop出错:" + err); } } export { 
   getLodop};

讯享网

3.在需要打印的地方调用getLodop()方法获取lodop对象，可以设置打印内容的样式。注意：样式尽可能避免使用css3，笔者亲测，css3属性打印中或许不会生效

讯享网<div id="printContent"> <!--打印的内容--> <table> <thead> <tr> <td colspan="4"></td> </tr> </thead> <caption> <p style="text-align: right;margin-bottom: 30px;">档案号：000001</p> <p class="head">这是你的表名</p> </caption> <tbody> <tr style="height: 50px;"> <td class="title">姓名</td> <td class="content">俞莲舟</td> <td class="title">家庭住址</td> <td class="content">北京市海淀区中关村大街18号创新大厦15层666号</td> </tr> <tr style="height: 50px;"> <td class="title">工作经历</td> <td class="exp" colspan="3"> <p class="top">工作经历工作经历工作经历工作经历工作经历工作经历工作经历</p> </td> </tr> <tr style="height: 50px;"> <td class="title" rowspan="2">自我评价</td> <td class="exp" colspan="3" style="border-bottom: 0;"> <p class="top">非常好且牛啦啦啦啦啦啦啦啦啦啦啦</p> </td> </tr> <tr> <td class="exp" colspan="3" style="border-top: 0;"> <p class="under">cdcdcdcdc</p> </td> </tr> <tr style="height: 100px;"> <td class="title" rowspan="2">评审团意见</td> <td class="exp" colspan="3" style="border-bottom: 0;"> <p class="top">LODOP控件提供了完善的安全措施，如数字签名、加密功能等，确保用户数据的安全性。</p> </td> </tr> <tr> <td class="exp" colspan="3" style="border-top: 0;"> <p class="under">评审人签字：</p> <p class="under">ℳ墨尔本</p> </td> </tr> </tbody> <tfoot> <tr> <td colspan="4"></td> </tr> </tfoot> </table> </div> <button @click="print">打印</button> 
import { 
   getLodop} from "../lodopUtils.js"; // 打印 function 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, "<span tdata='pageNO'>第页</span>/<span tdata='pageCount'>共页</span>"); // 标识每页都输出 LODOP.SET_PRINT_STYLEA(0, "ItemType", 1); // 预览 LODOP.PREVIEW(); // 直接打印使用 //LODOP.PRINT(); } // 可自定义打印样式 function setPrintStyle() { 
    let cssHtml = "<style>" + "* {" + "margin: 0;padding: 0;outline: none;list-style: none;text-decoration: none;" + "}" + ".main {" + " width: 100%;height:95%;overflow-y: auto;font-size: 16px;margin:0 20px;position: relative;" + "}" + ".head {font-size: 29px;text-align: center; padding-bottom: 5px;font-family: '黑体' !important;}" + "table thead,table tfoot{height:0px}" + "table thead tr, table tfoot tr{height:0px}" + "table thead td,table tfoot td{height:0px;border:none !important;}" + "table {text-align:center;border-collapse:collapse;border:0;font-family:'仿宋' !important;}" + "caption {padding-bottom:16px;}" + "table tr,td{padding:5px;border:1px solid #000000;}" + "table tr .title{width: 23% !important;padding: 3px;text-align: center;font-size:21px !important;}" + "table tr .content{width: 30% !important;padding: 3px;text-align: left;font-size:21px !important;}" + ".border{border-right:0 !important;border-left:0 !important}" + "table tr .exp{width: 80%;text-align: left;padding: 10px 0px 5px 10px;font-size:21px !important;position: relative;}" + "table tr .exp .top{font-size:21px !important;}" + "table tr .exp .under{text-align: right;padding: 3px 20px 3px 0;}" + "table tr:last-child td{border: 1px solid black;}" + "</style>"; return cssHtml; }

打印效果
在这里插入图片描述

至此，就可以实现打印了！

4. 附上Lodop打印控件常用API

函数名 作用
初始化运行环境 PRINT_INIT(strTaskName) 初始化运行环境，清理异常打印遗留的系统资源，设定打印任务名。每个打印事务至少初始化一次，任务名要尽量区别于其它打印任务，譬如用“XX单位_XX管理信息系统_XX子系统_XX模块_XX打印作业”字样
设定纸张大小 SET_PRINT_PAGESIZE(intOrient, PageWidth,PageHeight,strPageName) 设定纸张大小，建议打印初始化之后调用。例：LODOP.SET_PRINT_PAGESIZE(1,2100,2970,""); 设置纸张大小为：宽210mm*高297mm，纵向打印；LODOP.SET_PRINT_PAGESIZE(2, 0, 0,"A4");设置纸张为A4（按操作系统定义的A4尺寸），横向打印
增加超文本打印项(普通模式) ADD_PRINT_HTM(Top,Left,Width,Height,strHtmlContent) 增加超文本打印项(普通模式)，超文本代码内容，字符型，未限制长度。可以是一个完整的页面超文本代码，或者是一个代码段落，也可以是URL:web地址形式的URL地址。代码中若包含style="page-break-after:always"或style=“page-break-before:always”，该元素称为“强制分页元素”，控件会在该元素处分页。例：LODOP.ADD_PRINT_HTM(0,0, 300,100,"<hr><font size=5>hello </font>");
增加表格打印项（超文本模式）ADD_PRINT_TABLE(Top,Left,Width,Height,strHtml) 打印表格建议使用该函数，在当前页展示不下时，会自动将行方到下一页中展示。复杂表格可能会有问题。另外style="page-break-after:always"在该函数中不生效。
增加直线 ADD_PRINT_LINE(Top1,Left1, Top2, Left2,intLineStyle, intLineWidth) 增加直线，设定直线的两个端点，设定直线的线条类型和线宽。intLineStyle：线条类型，数字型，0–实线 1–破折线 2–点线 3–点划线 4–双点划线缺省线条是实线。
设置打印份数 SET_PRINT_COPIES(intCopies); 设置本次打印的份数。例：LODOP.SET_PRINT_COPIES(2);

使用过程中过程中有什么问题可以评论区留言或者私信我啊！！！

小讯
上一篇 2025-01-13 22:37
下一篇 2025-03-31 15:21

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/29280.html