最近我在做一个商品标签打印的需求,因为要满足业务方入仓的时候,可以打印标签来记录此时入仓的商品编码,所以我就开始进行调研,这里需要安装Lodop控件和你所链接的打印机驱动,切忌!!!
- Lodop打印控件是浏览器插件,与浏览器紧密结合来实现本地打印,是一种内嵌到浏览器里交互方式。(适用浏览器:ie系列、火狐51版及历史版本、谷歌44版及历史版本。(新版火狐及谷歌不再支持np插件,也不能使用lodop))
- C-Lodop打印服务是以提供服务方式解决web打印,摆脱了对浏览器的依赖,解决了新版谷歌(45版及后续版本)、64位火狐、edge等浏览器不再支持Lodop插件方式的情况,C-Lodop打印服务支持所有浏览器
启动项目后,需要安装此控件,然后点击右下角的get my lodop去安装官方Lodop的控件才能使用。
控件官网: www.lodop.net/demo.html
这里的9999 指的是我电脑上安装好lodop控件的端口号 我设置的是9999,默认的是8000点击设置也可以更改
我们链接的打印机是Argox CP-2140 PPLB 需要安装驱动便可使用,根据设置打印机首选项
来做相应的标签尺寸大小。接下来开始在项目中做配置打印的字段
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,传入相应的参数即可打印啦~~ 大功告成!