网页打印控件LODOP 6.057实战:安装、调用、批量打印与避坑指南 简介Lodop 6.057 打印控件2012 最新版是一套跨浏览器的 Web 打印解决方案面向需要处理网页端单据、票据、物流面单、标签等打印任务的前端开发与系统集成人员完整兼容 Chrome、IE、Firefox 等主流浏览器并承诺终身免费。压缩包采用 RAR 格式体积仅 1.72MB共 50 个文件由 47 个 HTML 示例页面、1 个 install_lodop.exe 安装程序、1 个 CSS 样式及 1 个 LodopFuncs.js 脚本组成结构精简便于按需查找。47 个 HTML 案例覆盖常见打印场景从基础文本到复杂表格与图文混排均可直接打开浏览器预览LodopFuncs.js 封装了扩展函数调用细节能帮助开发者快速理解参数配置、页面设计与任务提交流程减少重复踩坑。CSS 与脚本分离的组织方式也方便在现有项目中复用配合可独立安装的 exe 程序能够较快速地搭建本地打印环境。这份压缩包来自作者多个项目实践已有 1188 人学习下载适合正在开发 OA、ERP 或电商后台并希望以低成本解决浏览器打印兼容问题的技术开发者。1. LODOP 6.0572012 年的免费打印控件为什么今天还有人下载浏览器打印一直是个磨人活Chrome 自带的打印对自定义纸张不友好IE 的打印要依赖 ActiveXFirefox 又另搞一套。LODOP 6.057 就是一款 2012 年发布的网页打印控件用一套 JS 接口统一了 IE、Chrome、Firefox 的打印入口安装包不大发布时“终身免费”的说法吸引了很多做管理系统的人。直到现在还有不少老系统在用它打订单、快递单和检验单。这篇笔记把它的安装、调用、参数和踩坑点讲清楚适合要接手老打印模块或想找一条低成本网页打印路子的开发者。2. 先认清 6.057 的构成安装文件、接口脚本与三套浏览器通道2.1 资源包里常见文件与部署位置下载这套资源包解开后常见是这几个文件它们的职责和部署位置要先分清楚否则会犯“把安装包扔服务器上以为就装好了”的错。文件作用部署位置install_lodop32.exe32 位环境安装程序每台客户端机器上运行一次install_lodop64.exe64 位环境安装程序Windows 64 位系统优先用这个LodopFuncs.js前端加载和初始化控件的封装脚本放在服务端项目 JS 目录PrintSample.html官方示例页覆盖大部分 API 调用可放服务器或本机用于验证这里有个关键认知LODOP 不是纯前端 JS它在 Windows 上装了一个本地打印服务和一个浏览器插件。所以安装动作必须在客户端完成服务器只能提供示例页面。谁要在网页里点打印谁就得有本地安装程序。如果是内网批量部署常见做法是把安装包放在共享目录里让每个用户第一次使用时手动装一次或者做成登录脚本统一推送。2.2 为什么 IE、Chrome、Firefox 都能被一套接口调用这套控件的兼容逻辑不是靠浏览器原生能力而是靠“插件 本地服务”的组合。IE 下走 ActiveXFirefox 走扩展通道Chrome 走当时还支持的 NPAPI 插件。三者最终都连到同一个本地打印服务由本地服务调用 Windows 打印驱动完成出纸。前端拿到的 LODOP 对象本质是一个和本地服务通信的桥接引用。2012 年这个时间点很关键Chrome 还支持 NPAPIFirefox 的扩展机制也还没改成今天的 WebExtension所以 6.057 能在三大浏览器里统一接口。但今天的新版 Chrome 已经把 NPAPI 禁得干干净净Firefox 也改了扩展机制因此资源包标题里的“兼容”要理解为“当时版本兼容”不是无边界兼容。接手老系统时如果必须用 6.057常见方案是保留一个旧内核浏览器给打印专用或者启用 IE 模式。2.3 三类浏览器各自的安装注意点IE 下安装最容易翻车。装完程序后还要在“Internet 选项 → 安全 → 自定义级别”里把 ActiveX 相关项设为启用或提示。首次打开页面时浏览器会问是否允许安装控件点允许之后要刷新页面getLodop 才能拿到对象。Chrome 当时需要到 chrome://plugins 页面确认 LODOP 插件没有被禁用。如果插件被自动屏蔽要在站点设置里允许。Firefox 则在安装时留意扩展授权弹窗有的安全策略会静默拦截需要去附加组件管理器里手动启用。如果哪个浏览器安装正常但调用失败先把浏览器进程全部退出再重新打开页面。这个习惯能避开大部分“装了和没装一样”的问题。3. 一个完整的 JS 打印流程初始化、纸张设置再到出纸3.1 引入 LodopFuncs.js 并完成初始化前端最常见的写法是在 HTML 头部引入 LodopFuncs.js然后在按钮点击事件里调用 getLodop。我一般不会在页面 load 时就初始化控件而是等用户真正点打印按钮再初始化避免浏览器弹出无意义的权限提示。script srcjs/LodopFuncs.js/script script function printOrder(orderNo) { var LODOP getLodop(); if (typeof LODOP undefined || LODOP null) { alert(打印控件未安装请先运行安装包); return; } LODOP.PRINT_INIT(订单- orderNo); // 后续设置纸张、添加对象、预览或打印 } /script这段代码的逻辑是先拿控件实例拿不到就直接返回避免后面一连串 API 报“对象为空”的错。LodopFuncs.js 内部会创建隐藏的控件节点IE 返回 ActiveXObjectChrome 和 Firefox 则走插件通道。它把差异封装成了统一的 getLodop所以业务页面不用关心浏览器类型。参数说明PRINT_INIT 的第一个参数是任务名会出现在打印队列里方便用户区分多批任务。3.2 PRINT_INIT 与 SET_PRINT_PAGESIZE任务和纸张是两件事很多初次接触的人会把 PRINT_INIT 理解成“设置纸张”其实它只是声明一个打印任务。纸张大小要单独用 SET_PRINT_PAGESIZE 指定两件事分开记忆后面排错就不容易乱。LODOP.PRINT_INIT(销售单 A4 打印); LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, A4); LODOP.SET_PRINTER_INDEX(Microsoft Print to PDF);对照参数说明SET_PRINT_PAGESIZE 第一个参数是打印方向1 表示纵向2 表示横向第二个和第三个参数是纸张宽高单位是 0.1 毫米所以 A4 纵向是 2100 和 2970第四个参数是纸张名称如果目标打印机驱动里没有同名纸张控件会尝试按宽高自定义纸张。SET_PRINTER_INDEX 用于指定打印机字符串传打印机名称传 -1 或不调用则让用户在弹出的系统对话框里选打印机。实际项目里我不会把打印机名称写死在代码里因为不同电脑上的打印机名可能不一致。常见做法是把可选打印机列表从系统读出后让用户存到配置文件里打印时再读配置。3.3 ADD_PRINT_TEXT 与 SET_PRINT_STYLE坐标布局和样式控制添加文本对象是打印模板最基础的操作。LODOP 的坐标体系是相对纸张左上角四个参数分别是上边距、左边距、宽度、高度单位都是 0.1 毫米。这个和 CSS 的盒模型长得像但含义不同。LODOP.ADD_PRINT_TEXT(50, 40, 180, 30, 收货人 receiver.name); LODOP.SET_PRINT_STYLE(FontSize, 12); LODOP.SET_PRINT_STYLE(Bold, 1); LODOP.ADD_PRINT_TEXT(90, 40, 220, 30, 联系电话 receiver.mobile);第一行在距纸顶 5 毫米、距纸左 4 毫米的位置放了一个宽 18 毫米、高 3 毫米的文本区域。随后两句是样式设置FontSize 设置字号单位是点12 约等于小四Bold 设为 1 表示加粗。注意 SET_PRINT_STYLE 的作用范围是“下一个新增对象”不是修改当前已经加好的对象。如果要给不同文本分别设样式必须在每次 ADD_PRINT_TEXT 之前先 SET_PRINT_STYLE。这里还有一个容易踩的细节ADD_PRINT_TEXT 是纯文本对象不接受 HTML 标签想换行要老老实实用多个文本对象叠加或者改用 ADD_PRINT_HTML。ADD_PRINT_HTML 能把一小段 HTML 渲染成打印元素适合带复杂排版的小区域。3.4 预览、直接打印与静默模式打印流程的最后一步是把任务送出去。LODOP 提供了三个不同出口PREVIEW、PRINT_SETUP、PRINT。// 方案一先预览再手动点打印 LODOP.PREVIEW(); // 方案二先弹系统打印设置让用户选打印机 LODOP.PRINT_SETUP(); LODOP.PRINT(); // 方案三静默打印到默认打印机 LODOP.SET_PRINTER_INDEX(-1); LODOP.PRINT();方案一最稳妥适合单据打印场景用户可以在预览里确认数据再点打印。方案二适合第一次使用、需要选纸张或打印机的场景。方案三适合后台批量打印或者无人值守的场景但风险是用户可能忘了默认打印机是哪台结果打到别处去。我的习惯是只要不是纯后台任务一律先用 PREVIEW让用户看到模板和真实数据再决定要不要出纸。4. 表格、分页与批量打印把模板做成能直接出纸的成品4.1 用 ADD_PRINT_TABLE 打印表格而不是截网页很多老项目一开始偷懒直接用 window.print() 打整个网页结果页面上按钮、导航、背景色全打出来了调 CSS 调到崩溃。LODOP 的做法是把表格 HTML 传给 ADD_PRINT_TABLE由控件自己解析并送到打印驱动不受浏览器渲染结果影响。var tableHtml table border1 cellpadding4 cellspacing0 stylewidth:400px;font-size:10pt;font-family:SimSun; trth品名/thth数量/thth单价/thth金额/th/tr trtd示例商品A/tdtd2/tdtd15.00/tdtd30.00/td/tr trtd示例商品B/tdtd1/tdtd98.00/tdtd98.00/td/tr /table; LODOP.ADD_PRINT_TABLE(220, 40, 400, 160, tableHtml);这段代码把一段表格 HTML 放到距顶 22 毫米、距左 4 毫米的位置宽 40 毫米、高 16 毫米。ADD_PRINT_TABLE 对宽高的处理比较灵活如果表格内容超出指定高度它会自动分页继续往下排这比文本对象好用得多。参数说明宽高不一定要精确等于表格渲染尺寸控件会根据内容自行扩展打印区域。字体方面我习惯在表格 style 里显式写 font-family:SimSun避免换一台机器就缺字体导致错位。4.2 一单多页与手动拆页当一张单据内容太多一页放不下时可以用表格自动分页也可以手动 NewPage。自动分页速度快但表头是否每页重复取决于控件解析效果不够稳定。要求严格时我一般会手动拆分先放第一页内容然后调 NewPage再放第二页内容。LODOP.ADD_PRINT_TABLE(60, 40, 400, 180, pageOneTable); LODOP.NewPage(); LODOP.ADD_PRINT_TEXT(30, 40, 200, 30, 续表); LODOP.ADD_PRINT_TABLE(60, 40, 400, 200, pageTwoTable);NewPage 的作用是在同一个打印任务里新增一页后续添加的对象会放到新页里。打印时这一任务会连续出纸不会弹出多个打印任务。这里要注意NewPage 之前必须确认 PRINT_INIT 已经调用否则控件不知道你要往哪个任务加页。4.3 批量打印用 NewPage 串成一单而不是反复创建任务批量打印最容易犯的错是循环里反复调用 PRINT_INIT 和 PRINT结果用户看到十几个打印任务弹窗点都点不过来。正确思路是整个批次只建一个任务用 NewPage 隔开每一单。function printBatch(orders) { var LODOP getLodop(); if (!LODOP) return; LODOP.PRINT_INIT(批量打印- orders.length 单); LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, A4); for (var i 0; i orders.length; i) { if (i 0) { LODOP.NewPage(); } drawOrder(LODOP, orders[i]); } LODOP.PRINT(); } function drawOrder(LODOP, order) { LODOP.ADD_PRINT_TEXT(40, 40, 200, 30, 单号 order.no); LODOP.ADD_PRINT_TEXT(80, 40, 300, 30, 客户 order.customer); LODOP.ADD_PRINT_TEXT(120, 40, 300, 30, 金额 order.amount); }PRINT_INIT 在外面建一个任务循环里通过 NewPage 逐单新起页面最后只调一次 PRINT。这样打印队列里只有一个任务页数等于订单数用户确认一次就能全部出纸。逻辑说明drawOrder 函数里不要调用 PRINT_INIT否则会打断整个批量任务。如果需要每单打印份数不同可以在 drawOrder 内部用 SET_PRINT_COPIES但要注意它可能影响整个任务输出稳妥起见不同份数的单子最好拆成多个任务。5. 避坑手册安装失败、空白页、乱码与升级失效的排查记录5.1 安装后第一次调用仍提示“未安装”现象双击安装包正常走完流程打开页面点打印getLodop 返回 null。原因最常见的是安装时浏览器没关干净安装程序写入的插件句柄没有被浏览器重新加载第二种是 64 位系统装了 32 位安装包但页面被 64 位浏览器进程打开两边通道对不上。解决先彻底退出所有浏览器窗口包括系统托盘里的浏览器残留进程再重装一次。64 位系统优先用 install_lodop64.exe。装完打开示例页 PrintSample.html按 F12 看控制台有没有脚本报错确认 LodopFuncs.js 真的引进来了。5.2 预览正常点“打印”按钮没反应现象LODOP.PREVIEW() 能看到预览效果但代码走到 LODOP.PRINT() 之后系统打印队列里没有任何任务出现。原因预览只是控件自己渲染出来的画面未必经过打印机驱动真正出纸时如果本地服务没启动或打印机驱动把任务吞掉了前台不会有任何报错。解决先打开 Windows 服务列表找到 LODOP 对应的本地服务确认状态是“正在运行”被停止就手动启动并设为自动。然后尝试把目标打印机换成“Microsoft Print to PDF”如果 PDF 能生成说明问题出在真实打印机驱动上重装或更换驱动即可如果 PDF 也不行再查服务。5.3 中文变成乱码或方块现象屏幕上预览正常打印出来中文变成方框或问号。原因控件调用系统字体时找不到对应中文字体或者网页编码和控件默认字符集不一致。表格 HTML 里如果没有显式声明字体换到没有该字体的机器上就会乱。解决所有文本对象都尽量用 SET_PRINT_STYLE 指定 FontName值写成“宋体”或“微软雅黑”表格 HTML 的 style 里写 font-family:SimSun;font-size:10pt。存放模板的 JS 文件统一用 UTF-8 编码页面 head 里加 charset 声明避免字符串在传输过程中被转码。5.4 新版 Chrome 已经打不开老打印页现象Chrome 自动升级到 80 以上之后原来正常的打印页面全部失效控制台提示插件不受支持。原因Chrome 从 42 版本开始逐步禁用 NPAPILODOP 6.057 依赖的浏览器插件通道被关闭不是控件文件坏了。解决老系统想继续用 6.057只能保留一个旧版内核浏览器给打印专用或者让用户用 IE 模式访问打印页。如果业务允许改造最彻底的办法是把打印层升级成支持 WebSocket 通信的新版打印控件。安装这个资源包之前先确认现场浏览器版本别在纯新版 Chrome 环境里指望它直接跑通。5.5 打印结果偏移左边距实际出纸位置对不上现象预览里对象位置端正实际打出来整体向右下方偏移第二联更明显。原因打印机驱动里开了“缩放以适合页面”或“居中打印”把坐标体系改了也可能是打印机本身的物理进纸偏移。解决先关掉驱动里的缩放和居中选项再打印一张带坐标刻度的测试纸实测偏移量。比如实测整体右偏 2 毫米、下偏 1 毫米那就把模板里所有对象的 X 坐标统一减 20、Y 坐标统一减 10单位 0.1 毫米。打印驱动不同偏移量不同换打印机后要重新校准一遍。6. 把模板调准的一个技巧打印坐标网格校准纸正式上线前我会先打印一张坐标网格纸。方法很简单用 ADD_PRINT_RECT 画几条从 10 毫米到 100 毫米的边框线再画几条对角线打出来之后拿尺子量边距。LODOP.PRINT_INIT(坐标校准); LODOP.SET_PRINT_PAGESIZE(1, 2100, 2970, A4); for (var i 1; i 10; i) { LODOP.ADD_PRINT_RECT(10 i * 10, 10, 20, 20, 0, 0); } LODOP.ADD_PRINT_LINE(10, 10, 200, 290, 0, 1); LODOP.PREVIEW();这段代码在纸张上画了十条 10 毫米间距的块和一条对角线。打印后拿尺子量实际间距如果显示 10 毫米实际是 10.5 毫米说明打印机存在比例误差后续模板的宽高和坐标都要按这个比例换算。这个方法比盯着屏幕预览盲调快得多尤其是套打快递单、票据这种需要精确对位的场景。校准结果我一般记录成一张表记下打印机型号、驱动设置、实际偏移量下次换环境时直接套用。另外一个进阶习惯是把整套打印封装成一个模板函数数据和打印逻辑分离。数据从页面传进来函数内部只负责按模板坐标放对象这样以后改纸张尺寸或者换打印机只需要改一个函数不用每个按钮都翻一遍。从那以后我每次接手这类带网页打印的老系统都会强制走一遍网格校准和虚拟打印机验证希望帮到你。本文还有配套的精品资源点击获取