Commodity label printing (code printer)

Recently I do a commodity label printing needs, because to meet the business side of warehousing, you can print labels to record the warehousing of the goods code, so I began to investigate, here need to install Lodop control and your link to the printer driver, do not!!

The Lodop print control is a browser plug-in that is tightly integrated with the browser to achieve local printing, and is an interaction embedded in the browser. (Applicable browser: Ie series, Firefox 51 and history version, Google 44 and history version. (New Versions of Firefox and Google no longer support THE NP plugin, nor can lodop be used)
C-lodop printing service is to provide services to solve the web printing, get rid of the dependence on the browser, to solve the new Google (version 45 and later), 64-bit Firefox, Edge and other browsers no longer support the Lodop plug-in, C-LoDOp printing service support all browsers

After starting the project, you need to install this control, and then click get my lodop in the lower right corner to install the official loDOp control to use.

Control website:www.lodop.net/demo.html

Here 9999 refers to my computer installed loDOp control port number, I set 9999, the default is 8000, you can click to change the Settings

The printer we are linking is Argox CP-2140 PPLB, which can be used after the driver is installed, according to the setting of printer preferences

To make the corresponding label size. Next, start to configure the printed fields in your project

1 save the official lodopfuncs. js file to a directory, such as myProject\ SRC \assets\ lodopfuncs. js

2 Modify the lodopfuncs. js file and add export {getLodop} at the bottom of the file. / / export getLodop

3 import the module in the file where the printing event handler function is located. In the printing event function, call getLodop to obtain the LODOP object variable, write your own printing function according to the official tutorial, and output through PRINT, PREVIEW and 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};
Copy the code

Next, you need to configure specific parameters

/* eslint-disable camelcase,no-unused-vars */ import { getLodop } from './LodopFuncs'; const IMG_BASE_URL = 'https://retail.secoo.com'; /** * lodop.print_init () Print initialization * lodop.set_print_pagesize () sets the paper size * lodop.set_print_stylea () sets the object style * Lodop.add_print_text () sets plain text * lodop.add_print_barcode () sets bar code * lodop.set_printer_index () specifies the print device * Lodop.add_print_rect () rectangle line */ /** * print C2C-- product label print 40mm*30mm * @param {String} data @param {String} copies * @param {String} copies * @param {String} copies * @param {String} copies */ export function printProductTag(data, printerName, copies) {let {consignmentNo, copies, 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 merchandise label -' + 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'); // Plain text lodop.set_print_stylea (0, 'FontSize', 6); MarginTop += (consignmentNoHeight + 1); // Set object style 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'), 'Category :' + 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'), 'brand :' + chineseBrand); LODOP.SET_PRINT_STYLEA(0, 'FontSize', 6); marginTop += (chineseBrandHeight + 1); } // Print the qr code 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(' no valid printer, please initialize '); return; } LODOP.SET_PRINTER_INDEX(printerName); // Specify the print device lodop.set_copies (copies); Lodop.print (); } printProductTag = printProductTag ();}Copy the code

Commodity label printing (code printer)

Related Posts

Instructions for axios

Use of call, apply, and bind

Summary of applets development practice