526互联

网页调用打印机（Lodop）使用记录

发布时间 2023-04-07 17:08:09作者: Lixin-Link

最近项目中有打印标签的需要，使用Lodop实现。

Lodop

官网地址：https://www.lodop.net/index.html

这是一个收费控件，在打印时会出现试用字符，但是可以通过一定方式避免。

项目中需要打印的机器都是windows，因此安装CLodop即可。

安装之后在web页面上就可以引入对应js：

<!-- 需要安装CLodop并启动服务 -->
<script src="http://localhost:8000/CLodopFuncs.js"></script>

这里给一个例子，其他看官网教程即可。

使用Lodop调用斑马ZEBRA ZD888-203dpi ZPL标签打印机打印80mm*50mm的标签对应的函数：

function printLabelA(dataArray, options) {
    if (!options) {
        options = {}
    }
    if (!options.pageWidth) {
        options.pageWidth = 800
    }
    if (!options.pageHeight) {
        options.pageHeight = 500
    }

    let barcodeTop = 78;
    let barcodeLeft = 90
    let barcodeWidth = 200
    let barcodeHeight = 30

    let textHeight = 20
    let textLeft = barcodeLeft
    let textWidth = barcodeWidth
    let textTop = barcodeTop - textHeight + 2

    const SQUARE = "□";
    const YES = "√";

    LODOP.PRINT_INIT("标签A打印_" + Date.now());// 首先一个初始化语句
    LODOP.SET_PRINT_PAGESIZE(0, options.pageWidth, options.pageHeight, 'labelPaper')// 设定纸张大小

    for (const data of dataArray) {
        let simpleCode = data.simpleCode;
        let barCodeValue = data.barCodeValue;
        let subCode = data.subCode;
        let checkState = data.checkState;

        let state1 = (checkState.charAt(0) === '1') ? YES : SQUARE;
        let state2 = (checkState.charAt(1) === '1') ? YES : SQUARE;
        let state3 = (checkState.charAt(2) === '1') ? YES : SQUARE;
        let state4 = (checkState.charAt(3) === '1') ? YES : SQUARE;

        if (!simpleCode) {
            simpleCode = ""
        }
        if (!barCodeValue) {
            barCodeValue = ""
        }
        if (!subCode) {
            subCode = ""
        }
        if (!checkState) {
            checkState = "0000"
        }

        let printHtml = `
<table width="285" style="border-collapse:collapse;">
	<tbody>
		<tr>
			<td width="100%" height="180">
				<p align="center">
					<font face="宋体" size="5" weight="blod">样　品　标　签</font>
				</p>
				<p align="left" style="margin-top: 30px"><font face="宋体" size="2">　样品编号：</font></p>
				<p align="left"><font face="宋体" size="2">　详情编号：${subCode}</font></p>
				<p align="left">
					<span><font face="宋体" size="3">　${state1}状态A</font></span>
					<span><font face="宋体" size="3">　${state2}状态B</font></span>
					<span><font face="宋体" size="3">　${state3}状态C</font></span>
					<span><font face="宋体" size="3">　${state4}状态D</font></span>
				</p>
			</td>
		</tr>
	</tbody>
</table>
        `

        // 重点：开启新一页，可以实现多页打印
        LODOP.NewPage();
        // 可以通过模板的方式让其打印
        LODOP.ADD_PRINT_HTM(5, 10, "100%", "100%", printHtml);
        // 也可以直接添加条形码
        LODOP.ADD_PRINT_BARCODE(barcodeTop, barcodeLeft, barcodeWidth, barcodeHeight, "128A", barCodeValue);
        LODOP.SET_PRINT_STYLEA(0, "ShowBarText", 0);//设置是否显示二维码下方的文字
        // 或者直接添加文本
        LODOP.ADD_PRINT_TEXT(textTop, textLeft, textWidth, textHeight, simpleCode)// 增加纯文本项

    }

    // 先预览再打印不会出现试用字样。
    LODOP.PREVIEW();
}