基于clodop和Chrome原生打印的标签实现方法与性能对比

今天想看看，基于clodop和Chrome原生打印的标签实现方法与性能对比。先看看DeepSeek关于这个问题的回答！

CloudPrint 和 Chrome 原生打印的区别

基本概念差异

1. CloudPrint (Clodop)

   • 是基于云的打印服务解决方案
   • 需要安装专门的客户端程序
   • 支持跨平台、跨设备打印

2. Chrome 原生打印

   • 是浏览器内置的打印功能
   • 直接调用操作系统打印接口
   • 不需要额外安装软件

功能特性对比

标签打印的具体区别

1. 打印精度

   • Clodop: 提供更高精度的DPI控制，适合精细标签
   • Chrome: 依赖系统打印设置，精度有限

2. 模板支持

   • Clodop: 支持保存和调用打印模板
   • Chrome: 每次需要重新设置格式

3. 批量处理

   • Clodop: 优化了批量标签打印流程
   • Chrome: 批量打印效率较低

4. 特殊格式

   • Clodop: 支持条形码、二维码等特殊标签格式
   • Chrome: 支持有限

当然主角 Claude还是采用➡️ Windows下用docker desktop搭建Claude code 一文中的方式！

1. 首先使用clodop（老肚皮），主要缺点是需要给每个电脑安装客户端！再就是免预览打印需要买授权。
   
   第一次提示词说的不对，说成了lodop，马上改！
   
   看看成果！很细节的做了个测试页面~
   

• 老肚皮打印预览效果！消耗2500积分（实现代码在文末）

2. 再试试chrome浏览器版本！优点不用额外装东西！

• 有了前面成果的参照，2分钟就完成了。
  
• 出来了，效果怎么说呢，DeepSeek没讲错，很一般！
  

最后，奉上核心代码！先看clodop版本！

function createPrintJob(isPreview) {
            const sampleId = document.getElementById('sampleId').value;
            const patientName = document.getElementById('patientName').value;
            const patientId = document.getElementById('patientId').value;
            const gender = document.getElementById('gender').value;
            const age = document.getElementById('age').value;
            const center = document.getElementById('center').value;
            const testItem = document.getElementById('testItem').value;
            const identifier = document.getElementById('identifier').value;
            
            const now = new Date();
            const dateTime = `${String(now.getFullYear()).substr(-2)}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`;
            
            log('创建打印任务，参数:');
            log(`样本编号: ${sampleId}`);
            log(`患者信息: ${patientName} ${patientId} ${gender} ${age}`);
            log(`中心: ${center}`);
            log(`项目: ${testItem}`);
            log(`标识: ${identifier}`);
            log(`时间: ${dateTime}`);
            
            // 初始化打印任务
            CLODOP.PRINT_INIT("瓶签打印");
            
            // 设置纸张大小为50*30mm (单位：0.1mm)
            CLODOP.SET_PRINT_PAGESIZE(1, 500, 300, "");
            log('设置纸张大小: 50*30mm');
            
            // 添加条形码
            CLODOP.ADD_PRINT_BARCODE(10, 40, 135, 40, "128A", sampleId);
            CLODOP.SET_PRINT_STYLEA(0, "ShowBarText", 0);
            log('添加条形码: ' + sampleId);
            
            // 添加样本编号 - 条码下方居中
            CLODOP.ADD_PRINT_TEXT(50, 20, 110, 15, sampleId);
            CLODOP.SET_PRINT_STYLEA(0, "FontSize", 10);
            // CLODOP.SET_PRINT_STYLEA(0, "Bold", 1);
            CLODOP.SET_PRINT_STYLEA(0, "Alignment", 2);
            
            // 添加患者信息行
            const patientInfo = `${patientName} ${patientId} ${gender} ${age}`;
            CLODOP.ADD_PRINT_TEXT(65, 20, 150, 12, patientInfo);
            CLODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
            LODOP.SET_PRINT_STYLEA(3,"FontName","微软雅黑");
            
            // 添加体检中心
            CLODOP.ADD_PRINT_TEXT(80, 20, 120, 12, center);
            CLODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
            LODOP.SET_PRINT_STYLEA(3,"FontName","微软雅黑");
            
            // 添加检验项目
            CLODOP.ADD_PRINT_TEXT(92, 20, 180, 12, testItem);
            CLODOP.SET_PRINT_STYLEA(0, "FontSize", 8);
            LODOP.SET_PRINT_STYLEA(3,"FontName","微软雅黑");
            
            // 添加日期时间 - 右中
            CLODOP.ADD_PRINT_TEXT(40, 150, 60, 50, dateTime);
            CLODOP.SET_PRINT_STYLEA(0, "FontSize", 6); 
            CLODOP.SET_PRINT_STYLEA(0, "Bold", 1);  
            LODOP.SET_PRINT_STYLEA(3,"FontName","仿宋");
            
            // 添加标识 - 右上角
            CLODOP.ADD_PRINT_TEXT(10, 130, 50, 10, identifier);
            CLODOP.SET_PRINT_STYLEA(0, "FontSize", 9);
            CLODOP.SET_PRINT_STYLEA(0, "Alignment", 3);            
            LODOP.SET_PRINT_STYLEA(3,"FontName","微软雅黑");
            
            // 执行打印
            if (isPreview) {
                CLODOP.PREVIEW();
            } else {
                CLODOP.PREVIEW();
            }
        }
        

再看看chrome的版本

<!-- 打印内容区域 -->
    <div class="print-content" id="printContent">
        <div class="print-barcode">
            <svg id="printBarcode"></svg>
        </div>
        <div class="print-sample-id" id="printSampleId"></div>
        <div class="print-patient-info" id="printPatientInfo"></div>
        <div class="print-center" id="printCenter"></div>
        <div class="print-test-item" id="printTestItem"></div>
        <div class="print-datetime" id="printDateTime"></div>
        <div class="print-identifier" id="printIdentifier"></div>
    </div>

function updatePrintContent() {
            // 获取表单数据 - 基于print.html的createPrintJob方法
            const sampleId = $('#sampleId').val();
            const patientName = $('#patientName').val();
            const patientId = $('#patientId').val();
            const gender = $('#gender').val();
            const age = $('#age').val();
            const center = $('#center').val();
            const testItem = $('#testItem').val();
            const identifier = $('#identifier').val();
            const dateTime = updateDateTime();
            
            // 生成条码 - 对应CLodop的128A格式
            if (sampleId) {
                // 预览条码
                try {
                    JsBarcode("#previewBarcode", sampleId, {
                        format: "CODE128A",
                        width: 1,
                        height: 30,
                        displayValue: false,
                        margin: 0
                    });
                } catch (e) {
                    console.error('预览条码生成失败:', e);
                }
                
                // 打印条码 - 尺寸对应CLodop W=135, H=40
                try {
                    JsBarcode("#printBarcode", sampleId, {
                        format: "CODE128A",
                        width: 1,
                        height: 40,
                        displayValue: false,
                        margin: 0
                    });
                } catch (e) {
                    console.error('打印条码生成失败:', e);
                }
            }
            
            // 更新预览内容
            $('#previewContent').html(`
                <div style="position:absolute; top:5px; right:5px; font-size:9px;">${identifier}</div>
                <div style="text-align:center; font-weight:normal; font-size:10px; margin-bottom:3px;">${sampleId}</div>
                <div style="font-size:8px; margin:1px 0;">${patientName} ${patientId} ${gender} ${age}</div>
                <div style="font-size:8px; margin:1px 0;">${center}</div>
                <div style="font-size:8px; margin:1px 0;">${testItem}</div>
                <div style="position:absolute; top:35px; right:5px; font-size:6px; font-weight:bold;">${dateTime}</div>
            `);
            
            // 更新打印内容 - 完全按照CLodop布局
            $('#printSampleId').text(sampleId);
            $('#printPatientInfo').text(`${patientName} ${patientId} ${gender} ${age}`);
            $('#printCenter').text(center);
            $('#printTestItem').text(testItem);
            $('#printDateTime').text(dateTime);
            $('#printIdentifier').text(identifier);
        }
        
        function printLabel() {
            // 更新打印内容
            updatePrintContent();
            
            // 延迟一下确保条码生成完成
            setTimeout(function() {
                // 调用浏览器打印
                window.print();
            }, 100);
        }

/* 打印样式 - 基于CLodop的精确坐标转换 */
        @media print {
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                page-break-inside: avoid;
            }
            
            body {
                background: white;
                font-family: "Microsoft YaHei", Arial, sans-serif;
                width: 50mm !important;
                height: 30mm !important;
                overflow: hidden !important;
            }
            
            /* 隐藏非打印元素 */
            .container, .title, .form-group, .buttons, .preview {
                display: none !important;
            }
            
            /* 显示打印内容 */
            .print-content {
                display: block !important;
                width: 50mm;
                height: 30mm;
                position: relative;
                page-break-after: avoid;
                page-break-inside: avoid;
                box-sizing: border-box;
            }
            
            /* 设置页面大小 */
            @page {
                size: 50mm 30mm;
                margin: 0;
                padding: 0;
            }
            
            html, body {
                width: 50mm;
                height: 30mm;
                overflow: hidden;
            }
            
            /* 条形码区域 - 对应 CLODOP Y=10, X=40, W=135, H=40 */
            .print-barcode {
                position: absolute;
                top: 1mm;        /* Y=10 -> 1mm */
                left: 4mm;       /* X=40 -> 4mm */
                width: 13.5mm;   /* W=135 -> 13.5mm */
                height: 4mm;     /* H=40 -> 4mm */
            }
            
            .print-barcode svg {
                width: 100%;
                height: 100%;
            }
            
            /* 样本编号 - 对应 Y=50, X=20, W=110, H=15 */
            .print-sample-id {
                position: absolute;
                top: 5.5mm;        /* Y=50 -> 5mm */
                left: 3mm;       /* X=20 -> 2mm */
                width: 11mm;     /* W=110 -> 11mm */
                text-align: center;
                font-size: 5px;
                font-family: "Microsoft YaHei", Arial, sans-serif;
            }
            
            /* 患者信息 - 对应 Y=65, X=20, W=150, H=12 */
            .print-patient-info {
                position: absolute;
                top: 7.5mm;      /* Y=65 -> 6.5mm */
                left: 3mm;       /* X=20 -> 2mm */
                width: 20mm;     /* W=150 -> 15mm */
                font-size: 5px;
                font-family: "Microsoft YaHei", Arial, sans-serif;
            }
            
            /* 体检中心 - 对应 Y=80, X=20, W=120, H=12 */
            .print-center {
                position: absolute;
                top: 9.5mm;        /* Y=80 -> 8mm */
                left: 3mm;       /* X=20 -> 2mm */
                width: 12mm;     /* W=120 -> 12mm */
                font-size: 5px;
                font-family: "Microsoft YaHei", Arial, sans-serif;
            }
            
            /* 检验项目 - 对应 Y=92, X=20, W=180, H=12 */
            .print-test-item {
                position: absolute;
                top: 12mm;      /* Y=92 -> 9.2mm */
                left: 3mm;       /* X=20 -> 2mm */
                width: 18mm;     /* W=180 -> 18mm */
                font-size: 5px;
                font-family: "Microsoft YaHei", Arial, sans-serif;
            }
            
            /* 日期时间 - 对应 Y=40, X=150, W=60, H=50 */
            .print-datetime {
                position: absolute;
                top: 4mm;        /* Y=40 -> 4mm */
                right: 2mm;      /* X=150 -> 15mm */
                width: 6mm;      /* W=60 -> 6mm */
                font-size: 4px;
                font-weight: bold;
                font-family: "FangSong", serif;
            }
            
            /* 标识 - 对应 Y=10, X=130, W=50, H=10 */
            .print-identifier {
                position: absolute;
                top: 1mm;        /* Y=10 -> 1mm */
                right: 2mm;      /* X=130+对齐调整 */
                font-size: 5px;
                font-family: "Microsoft YaHei", Arial, sans-serif;
            }
        }
        
        /* 屏幕上隐藏打印内容 */
        .print-content {
            display: none;
        }

适用场景建议

• 选择Clodop:

  • 需要专业标签打印
  • 大量或批量打印需求
  • 需要精确控制打印布局
  • 跨设备/网络打印需求

• 选择Chrome原生打印:

  • 简单、临时的打印需求
  • 不想安装额外软件
  • 对打印精度要求不高
  • 单次少量打印

结论：两者可以配合使用，根据具体需求选择合适的打印方式。