商品标签打印(打码机)

1,145 阅读4分钟

最近我在做一个商品标签打印的需求,因为要满足业务方入仓的时候,可以打印标签来记录此时入仓的商品编码,所以我就开始进行调研,这里需要安装Lodop控件和你所链接的打印机驱动,切忌!!!

  1. Lodop打印控件是浏览器插件,与浏览器紧密结合来实现本地打印,是一种内嵌到浏览器里交互方式。(适用浏览器:ie系列、火狐51版及历史版本、谷歌44版及历史版本。(新版火狐及谷歌不再支持np插件,也不能使用lodop))
  2. C-Lodop打印服务是以提供服务方式解决web打印,摆脱了对浏览器的依赖,解决了新版谷歌(45版及后续版本)、64位火狐、edge等浏览器不再支持Lodop插件方式的情况,C-Lodop打印服务支持所有浏览器

启动项目后,需要安装此控件,然后点击右下角的get my lodop去安装官方Lodop的控件才能使用。

image.png

控件官网: www.lodop.net/demo.html

image.png

这里的9999 指的是我电脑上安装好lodop控件的端口号 我设置的是9999,默认的是8000点击设置也可以更改

我们链接的打印机是Argox CP-2140 PPLB 需要安装驱动便可使用,根据设置打印机首选项

1628352732(1).png 来做相应的标签尺寸大小。接下来开始在项目中做配置打印的字段

1 把官方提供的LodopFuncs.js文件保存到某个目录下,如myProject\src\assets\LodopFuncs.js

2 修改LodopFuncs.js文件, 在文件最底部添加一行代码  export { getLodop }; //导出getLodop 

3 在打印事件处理函数所在文件里 import 该 module 在打印事件函数中调用getLodop获取LODOP对象变量,按照官方教程书写自己的打印函数,通过 PRINT、PREVIEW、PRINT_DESIGN进行输出

//= =本JS是加载Lodop插件及CLodop服务的综合示例,可直接使用,建议看懂后融进自己页面程序==

let CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
const install32 = '/admin/c2c/static/lodop/install_lodop32.exe';
const install64 = '/admin/c2c/static/lodop/install_lodop64.exe';
const clodop = '/admin/c2c/static/lodop/CLodop_Setup_for_Win32NT.exe';

//= =判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop () {
    try {
        var ua = navigator.userAgent;
        if (ua.match(/Windows\sPhone/i)) { return true; }
        if (ua.match(/iPhone|iPod|iPad/i)) { return true; }
        if (ua.match(/Android/i)) { return true; }
        if (ua.match(/Edge\D?\d+/i)) { return true; }

        var verTrident = ua.match(/Trident\D?\d+/i);
        var verIE = ua.match(/MSIE\D?\d+/i);
        var verOPR = ua.match(/OPR\D?\d+/i);
        var verFF = ua.match(/Firefox\D?\d+/i);
        var x64 = ua.match(/x64/i);
        if ((!verTrident) && (!verIE) && (x64)) { return true; } else if (verFF) {
            verFF = verFF[0].match(/\d+/);
            if ((verFF[0] >= 41) || (x64)) { return true; }
        } else if (verOPR) {
            verOPR = verOPR[0].match(/\d+/);
            if (verOPR[0] >= 32) { return true; }
        } else if ((!verTrident) && (!verIE)) {
            var verChrome = ua.match(/Chrome\D?\d+/i);
            if (verChrome) {
                verChrome = verChrome[0].match(/\d+/);
                if (verChrome[0] >= 41) { return true; }
            }
        }
        return false;
    } catch (err) {
        return true;
    }
}

//= =引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
if (needCLodop()) {
    var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;

    var JS1 = document.createElement('script');
    JS1.src = 'http://localhost:8000/CLodopfuncs.js?priority=1';
    head.insertBefore(JS1, head.firstChild);

    var JS2 = document.createElement('script');
    JS2.src = 'http://localhost:18000/CLodopfuncs.js?priority=0';
    head.insertBefore(JS2, head.firstChild);

    CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));

    if (JS1.attachEvent) {
        CLodopJsState = 'loading';
        var onChange = function () {
            if (window.event.srcElement.readyState === 'loaded') { CLodopJsState = 'complete'; }
        };
        JS1.attachEvent('onreadystatechange', onChange);
        JS2.attachEvent('onreadystatechange', onChange);
    }
}

//= =获取LODOP对象主过程,判断是否安装、需否升级:==
function getLodop (oOBJECT, oEMBED) {
    var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href=" + install32 + " target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
    var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href=" + install32 + " target='_self'>执行升级</a>,升级后请重新进入。</font>";
    var strHtm64Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href=" + install64 + " target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
    var strHtm64Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href=" + install64 + " target='_self'>执行升级</a>,升级后请重新进入。</font>";
    var strHtmFireFox = "<br><br><font color='#FF00FF'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>";
    var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>";
    var strCLodopInstall1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动,点击这里<a href=" + install64 + " target='_self'>下载执行安装</a>";
    var strCLodopInstall2 = "<br>(若此前已安装过,可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>)";
    var strCLodopInstall3 = ',成功后请刷新本页面。</font>';
    var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href=" + clodop + " target='_self'>执行升级</a>,升级后请刷新页面。</font>";
    var LODOP;
    try {
        var ua = navigator.userAgent;
        var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
        if (needCLodop()) {
            try {
                LODOP = getCLodop();
            } catch (err) {}
            if (!LODOP && (document.readyState !== 'complete' || (isIE && CLodopJsState === 'loading'))) {
                alert('网页还没下载完毕,请稍等一下再操作.');
                return;
            }
            if (!LODOP) {
                document.body.innerHTML = strCLodopInstall1 + (CLodopIsLocal ? strCLodopInstall2 : '') + strCLodopInstall3 + document.body.innerHTML;
                return;
            } else {
                if (CLODOP.CVERSION < '4.0.8.8') {
                    document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
                }
                if (oEMBED && oEMBED.parentNode) { oEMBED.parentNode.removeChild(oEMBED); }
                if (oOBJECT && oOBJECT.parentNode) { oOBJECT.parentNode.removeChild(oOBJECT); }
            }
        } else {
            var is64IE = isIE && !!(ua.match(/x64/i));
            //= =如果页面有Lodop就直接使用,否则新建:==
            if (oOBJECT || oEMBED) {
                if (isIE) { LODOP = oOBJECT; } else { LODOP = oEMBED; }
            } else if (!CreatedOKLodopObject) {
                LODOP = document.createElement('object');
                LODOP.setAttribute('width', 0);
                LODOP.setAttribute('height', 0);
                LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;');
                if (isIE) { LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA'); } else { LODOP.setAttribute('type', 'application/x-print-lodop'); }
                document.documentElement.appendChild(LODOP);
                CreatedOKLodopObject = LODOP;
            } else { LODOP = CreatedOKLodopObject; }
            //= =Lodop插件未安装时提示下载地址:==
            if ((!LODOP) || (!LODOP.VERSION)) {
                if (ua.indexOf('Chrome') >= 0) { document.body.innerHTML = strHtmChrome + document.body.innerHTML; }
                if (ua.indexOf('Firefox') >= 0) { document.body.innerHTML = strHtmFireFox + document.body.innerHTML; }
                document.body.innerHTML = (is64IE ? strHtm64Install : strHtmInstall) + document.body.innerHTML;
                return LODOP;
            }
        }
        if (LODOP.VERSION < '6.2.2.6') {
            if (!needCLodop()) { document.body.innerHTML = (is64IE ? strHtm64Update : strHtmUpdate) + document.body.innerHTML; }
        }
        //= ==如下空白位置适合调用统一功能(如注册语句、语言选择等):==
        LODOP.SET_LICENSES('填写相关内容1', '88C3EAF3AB0D3352F7DED05CDBF10DAB', '填写相关内容2', 'D99CD2F05C34B899B6EEADD9C303E239');
        LODOP.SET_LICENSES('THIRD LICENSE', '', 'Beijing Secoo Trading Co.,Ltd', '280486733CD80BE4E7769A535E5C6D80');
        //= ======================================================
        return LODOP;
    } catch (err) {
        alert('getLodop出错:' + err);
    }
}
export {getLodop};

接下来需要配置具体的参数

/* eslint-disable camelcase,no-unused-vars */
import { getLodop } from './LodopFuncs';
const IMG_BASE_URL = 'https://retail.secoo.com';
/**
 * LODOP.PRINT_INIT() 打印初始化
 * LODOP.SET_PRINT_PAGESIZE() 设置纸张大小
 * LODOP.SET_PRINT_STYLEA() 设置对象风格
 * LODOP.ADD_PRINT_TEXT() 设置纯文本
 * LODOP.ADD_PRINT_BARCODE() 设置条形码
 * LODOP.SET_PRINTER_INDEX() 指定打印设备
 * LODOP.SET_PRINT_COPIES() 设置打印份数
 * LODOP.ADD_PRINT_RECT() 矩形线
 */
/**
 * 打印C2C--商品标签打印 40mm*30mm
 * @param {String} data 要填充打印内容(服务单编号,商品编码,品类,品牌)
 * @param {String} printerName 打印机名称
 * @param {String} copies 打印份数,默认为 1
 */
export function printProductTag(data, printerName, copies) {
    let { consignmentNo, commodityNo, categoryFirstName, chineseBrand, qrCodeUrl } = data
    // console.log('printProductTag:', consignmentNo,commodityNo,categoryFirstName,chineseBrand,qrCodeUrl);
    if (!copies || isNaN(copies)) {
        copies = 1;
    }
    let LODOP = getLodop();
    LODOP.PRINT_INIT('C2C商品标签-' + consignmentNo);
    const marginLeft = 4;
    let marginTop = 3;
    LODOP.SET_PRINT_PAGESIZE(1, '40mm', '30mm'); //纸张大小
    // const barcodeHeight = 7;
    // LODOP.ADD_PRINT_BARCODE((marginTop + 'mm'), (marginLeft + 'mm'), '30mm', (barcodeHeight + 'mm'), '128Auto', consignmentNo);//条形码
    // LODOP.SET_PRINT_STYLEA(0, 'FontSize', 6);

    // 打印服务单编号
    if (consignmentNo && consignmentNo.length > 0) {
        const consignmentNoHeight = 3;
        LODOP.ADD_PRINT_TEXT((marginTop + 'mm'), (marginLeft - 3 + 'mm'), '36mm', (consignmentNoHeight + 'mm'), '服务单编号:' + consignmentNo);//纯文本
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 6);//设置对象风格
        marginTop += (consignmentNoHeight + 1);
    }
    // 打印商品编号
    if (commodityNo) {
        const commodityNoHeight = 3;
        LODOP.ADD_PRINT_TEXT((marginTop + 'mm'), (marginLeft - 3 + 'mm'), '36mm', (commodityNoHeight + 'mm'), '商品编号:' + commodityNo);
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 6);
        marginTop += (commodityNoHeight + 1);
    }
    // 打印品类
    if (categoryFirstName) {
        const categoryFirstNameHeight = 3;
        LODOP.ADD_PRINT_TEXT((marginTop + 'mm'), (marginLeft - 3 + 'mm'), '36mm', (categoryFirstNameHeight + 'mm'), '品类:' + categoryFirstName);
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 6);
        marginTop += (categoryFirstNameHeight + 1);
    }
    // 打印品牌
    if (chineseBrand) {
        const chineseBrandHeight = 3;
        LODOP.ADD_PRINT_TEXT((marginTop + 'mm'), (marginLeft - 3 + 'mm'), '36mm', (chineseBrandHeight + 'mm'), '品牌:' + chineseBrand);
        LODOP.SET_PRINT_STYLEA(0, 'FontSize', 6);
        marginTop += (chineseBrandHeight + 1);
    }
    // 打印二维码
    let top = 5;
    let left = 0;
    let top1 = top + 7;
    let left1 = left + 22;
    LODOP.ADD_PRINT_BARCODE(top1 + 'mm', left1 + 'mm', '20mm', '20mm', 'QRCode', qrCodeUrl);
    if (LODOP.GET_PRINTER_COUNT() < 1) {
        alert('无有效打印机,请初始化');
        return;
    }
    LODOP.SET_PRINTER_INDEX(printerName);//指定打印设备
    LODOP.SET_PRINT_COPIES(copies);//设置打印份数
    LODOP.PRINT();
}

然后再相应的页面中调用该函数printProductTag,传入相应的参数即可打印啦~~  大功告成!