首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> Java 程式設計 >> Java 綜合教學

Java Web 云打印实战:Lodop 插件集成全流程

     編輯:Java 綜合教學

Java Web 云打印实战:Lodop 插件集成全流程

云打印将打印内容上传至云端服务器,再分发到打印机,区别于传统网络打印(数据存本地设备)。本文以 Lodop 为例,详述从前端引用到后端无感的完整集成步骤。

核心架构

  • 前端主导:打印逻辑全在浏览器端(JS + Lodop 插件),后端仅提供数据
  • 客户端插件:需安装 install_lodop.exe(按浏览器位数 32/64 位选择)
  • 跨浏览器:IE 用 ActiveX (clsid),Chrome/Firefox 用 embed 插件

实现步骤

1. 资源准备

将 Lodop 相关文件(LodopFuncs.js、安装包)放入 Web 资源目录(如 /js/Lodop/)。

Lodop 文件目录 安装包区分

2. 页面引入插件对象

<!-- 打印插件 -->
<script src="/js/Lodop/LodopFuncs.js" type="text/javascript"></script>
<object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
    <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
</object>

3. 打印页面模板

<form action="offcomplete/print" method="post">
    <input type="hidden" id="id" name="offBatchfile.id" value="${offBatchfile.id!}" />
    <div class="print_btn_box">
        <a href="#" onclick="PrintURL()" class="btn btn-default"><i class="fa fa-print"></i>打印</a>
        <a href="/offcomplete/export/${printUsefullId!}" class="btn btn-default"><i class="fa fa-file-word-o"></i>下载</a>
    </div>
    <div align="center" id="print">
        <% include("/offcomplete/view.html"){}%>  <!-- 待打印内容区域 -->
    </div>
</form>

4. 打印触发脚本

<script type="text/javascript">
function PrintURL() {
    try {
        var LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
        LODOP.PRINT_INIT("");
        LODOP.SET_PRINT_STYLE("FontSize", 18);
        LODOP.SET_PRINT_STYLE("Bold", 1);
        LODOP.ADD_PRINT_HTM(45, 55, 770, 1004, document.getElementById("print").innerHTML);
        LODOP.PREVIEW();  // 预览;如需直打用 LODOP.PRINT()
    } catch (e) {
        // 异常处理:提示安装
    }
}
</script>

常见问题与对策

浏览器选型建议

开发阶段首选 Firefox/Chrome 调试工具强大;但兼容性测试必须覆盖 IE(企业内网常用)。低版本 IE 跑通,高版本通常无问题。

总结

Lodop 云打印实现“前端渲染 + 插件驱动打印机”,后端零代码侵入。关键点在于:插件对象正确引入、打印区域精准选择、客户端环境兼容性测试。新项目建议评估基于 HTML5 window.print() + @media print CSS 的无插件方案。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved
现象原因解决
提示安装 install_lodop客户端未安装/版本不匹配按 OS 位数下载对应 exe 安装
IE 正常,Chrome 失败Chrome 禁用 NPAPI 插件需用 Lodop 新版(支持 WebSocket/HTTP 云打印模式)
预览样式错乱CSS 未加载/打印区域宽高不当调整 ADD_PRINT_HTM 参数,确保打印区域包含完整样式