一、引入JS
二、获取Lodop对象
三、设置Lodop对象属性
四、定义打印设计和打印预览函数
五、button按钮调用函数
<!DOCTYPE html>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>资产标识卡打印（C-Lodop）</title>
<!-- 引入 C-Lodop 函数库 -->
<scriptsrc="http://localhost:8000/CLodopfuncs.js"></script>
<!-- 条形码和二维码库 -->
<scriptth:src="@{/js/JsBarcode.all.min.js}"></script>
<scriptth:src="@{/js/qrcode.min.js}"></script>
<style>
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
text-align: center;
}
.print-btn {
padding: 10px20px;
background-color: #27ae60;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
box-shadow: 02px5pxrgba(0,0,0,0.2);
}
.print-btn:hover {
background-color: #219955;
}
.info {
margin: 20pxauto;
max-width: 500px;
text-align: left;
line-height: 1.8;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 01px5pxrgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h2>资产标识卡打印系统（C-Lodop）</h2>
<!-- 示例数据表单 -->
<divclass="info">
<label>名称：
<spanid="assetName"th:text="${assets.assetName} ?: '-'"></span>
</label><br>
<label>编号：
<spanid="assetTag"th:text="${assets.assetTag} ?: '-'"></span>
</label><br>
<label>型号：
<spanid="model"th:text="${assets.model} ?: '-'"></span>
</label><br>
<label>序列号：
<spanid="serialNumber"th:text="${assets.serialNumber} ?: '-'"></span>
</label><br>
<label>部门：
<spanid="department"th:each="dict:${@dict.getType('danweikeshi')}"
th:if="${dict.dictValue == assets.departmentId}" th:text="${dict.dictLabel}">
</span>
</label><br><br>
<buttonclass="print-btn"onclick="Preview1()">️ 打印标签</button>
<button onclick="Design1()">打印设计</button>
</div>
<script>
// ========== 获取 CLODOP 对象 ==========
functiongetCLODOP() {
letCLODOP=getCLodop();
if (!CLODOP|| (typeofCLODOP.VERSION==="undefined")) {
if (document.readyState==="complete") {
alert("CLODOP未准备好，请稍后再试！");
} else {
setTimeout(getCLODOP, 100);
}
returnnull;
}
returnCLODOP;
}
// ========== 打印设计 ==========
functionDesign1() {
CreateAssetCard();
CLODOP.PRINT_DESIGN();
};
// ========== 打印预览 ==========
functionPreview1() {
CreateAssetCard();
CLODOP.PREVIEW();
}
// ==========创建资产标识卡 ==========
functionCreateAssetCard() {
constCLODOP=getCLODOP();
if (!CLODOP) return;
constassetName=document.getElementById("assetName").textContent.trim() ||"-";
constassetTag=document.getElementById("assetTag").textContent.trim() ||"-";
constmodel=document.getElementById("model").textContent.trim() ||"-";
constserialNumber=document.getElementById("serialNumber").textContent.trim() ||"-";
constdepartment=document.getElementById("department").textContent.trim() ||"-";
// --- 初始化 ---
CLODOP.PRINT_INIT("标识卡");
CLODOP.SET_PRINT_MODE("PRINT_NEXTPAGE", 0);
CLODOP.SET_PRINT_PAGESIZE(1, "40mm", "30mm", "");
// === 1. 标题：资产标识卡 ===
CLODOP.ADD_PRINT_TEXT("2mm", "1mm", "38mm", "6mm", "资产标识卡");
CLODOP.SET_PRINT_STYLEA(0,"FontSize", 12); // 字体大小
CLODOP.SET_PRINT_STYLEA(0,"Bold", 1);
CLODOP.SET_PRINT_STYLEA(0,"Alignment", 2);
// === 2. 名称 ===
CLODOP.ADD_PRINT_TEXT("8mm", "1mm", "38mm", "5mm", "名称："+assetName);
CLODOP.SET_PRINT_STYLEA(0,"FontSize", 8);
CLODOP.SET_PRINT_STYLEA(0,"Alignment", 0);
// === 3. 编号 ===
CLODOP.ADD_PRINT_TEXT("12mm", "1mm", "38mm", "5mm", "编号："+assetTag);
CLODOP.SET_PRINT_STYLEA(0,"FontSize", 9);
CLODOP.SET_PRINT_STYLEA(0,"Alignment", 0);
CLODOP.SET_PRINT_STYLEA(0,"Bold", 1);
// === 4. 型号 ===
CLODOP.ADD_PRINT_TEXT("16mm", "1mm", "38mm", "5mm", "型号："+model);
CLODOP.SET_PRINT_STYLEA(0,"FontSize", 8);
CLODOP.SET_PRINT_STYLEA(0,"Alignment", 0);
// === 5. 序列号 ===
CLODOP.ADD_PRINT_TEXT("20mm", "1mm", "38mm", "5mm", "序列号："+serialNumber);
CLODOP.SET_PRINT_STYLEA(0,"FontSize", 8);
CLODOP.SET_PRINT_STYLEA(0,"Alignment", 0);
// === 6. 部门 ===
CLODOP.ADD_PRINT_TEXT("24mm", "1mm", "38mm", "5mm", "部门："+department);
CLODOP.SET_PRINT_STYLEA(0,"FontSize", 8);
CLODOP.SET_PRINT_STYLEA(0,"Alignment", 0);
CLODOP.SET_PRINT_STYLEA(0,"LetterSpacing",-2);
}
</script>
</body>
</html>作为客户端的电脑，需要安装C-Lodop服务，并且能访问相关的端口，如8000
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
