云打印将打印内容上传至云端服务器,再分发到打印机,区别于传统网络打印(数据存本地设备)。本文以 Lodop 为例,详述从前端引用到后端无感的完整集成步骤。
install_lodop.exe(按浏览器位数 32/64 位选择)clsid),Chrome/Firefox 用 embed 插件将 Lodop 相关文件(LodopFuncs.js、安装包)放入 Web 资源目录(如 /js/Lodop/)。

<!-- 打印插件 -->
<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>
<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>
<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>
| 现象 | 原因 | 解决 |
|---|---|---|
| 提示安装 install_lodop | 客户端未安装/版本不匹配 | 按 OS 位数下载对应 exe 安装 |
| IE 正常,Chrome 失败 | Chrome 禁用 NPAPI 插件 | 需用 Lodop 新版(支持 WebSocket/HTTP 云打印模式) |
| 预览样式错乱 | CSS 未加载/打印区域宽高不当 | 调整 ADD_PRINT_HTM 参数,确保打印区域包含完整样式 |