前言

条码打印不同于普通打印机，条码大小各不相同，需要针对不同标签贴纸开发不同的样式

1. 条码打印的两种方案：

后端ZPL指令打印
前端调用浏览器打印

2. 优缺点分析：

	优点	缺点
后端ZPL指令打印	样式固定，不会出现兼容性问题	不能调用客户端打印机，打印机需要支持ZPL指令
前端调用浏览器打印	对打印机品牌没有要求，可以调用客户端打印机打印	样式比较难调整，中文需要单独下载字体

一.后端打印

前端打印主要是使用javax.print.*包下的类通过给打印机发送ZPL指令的字符串实现打印服务，
核心的业务逻辑主要是寻找打印机，发送指令，如下：

 public class ZebraService {private static final Logger logger = LoggerFactory.getLogger(ZebraService.class);public ZebraService(ZebraProperties zebraProperties) {this.zebraProperties = zebraProperties;PrintService[] services = PrintServiceLookup.lookupPrintServices(null,null);if (services != null && services.length > 0) {for (PrintService service : services) {if (zebraProperties.getName().equals(service.getName())) {printService = service;break;}}}if (printService == null) {logger.error("没有找到打印机：{}",zebraProperties.getName());//循环出所有的打印机if (services != null && services.length > 0) {for (PrintService service : services) {logger.warn("可用的打印机：{}",service.getName());}}}else{logger.info("找到打印机：{},打印机名称：{}",zebraProperties.getName(),printService.getAttribute(PrinterName.class).getValue());}}public boolean print(String zpl){logger.info("当前ZPL:{}",zpl);if(printService==null){logger.error("打印出错：没有找到打印机{}",zebraProperties.getName());return false;}DocPrintJob job = printService.createPrintJob();byte[] by = zpl.getBytes();DocFlavor flavor = DocFlavor.BYTE_ARRAY.AUTOSENSE;Doc doc = new SimpleDoc(by, flavor, null);try {job.print(doc, null);logger.info("已打印");return true;} catch (PrintException e) {logger.error("打印出错:{}",e.getMessage());return false;}}
}

具体的组装ZPL指令可以查询ZPL手册

二.前端打印

前端打印我主要测试了两种方案：1.直接画html然后打印，2.生成pdf后打印
第一种方案css样式调整起来折磨人，直接选择第二种简单粗暴

1.这里主要使用了3个插件：

npm i jspdf  # 用于生成pdf
npm i jsbarcode  # 用于生成一维码
npm i qrcode  # 用于生成二维码

2. 先贴出完整代码

import {jsPDF} from "jspdf";
import './jianbaosong-normal'const table = {unit:'mm',width:100,height:80,offset:2,colH:10,
}
let doc;
function tableInit(){doc = new jsPDF({orientation: "landscape",unit: table.unit,format: [table.width, table.height]});
}
//获取行Y值
function getRowY(indexRow,colH){return table.offset+indexRow*colH;
}export function pdfPrint(contents){tableInit();const length=contents.lengthfor (let i = 0; i < length; i++) {if(i>0&& i<length){doc.addPage([table.width,table.height],'landscape')}doc.setFont('jianbaosong');//上边doc.line(table.offset,table.offset,table.width-table.offset,table.offset)//左边doc.line(table.offset,table.offset,table.offset,table.height-table.offset)//右边doc.line(table.width-table.offset,table.offset,table.width-table.offset,table.height-table.offset)//下边doc.line(table.offset,table.height-table.offset,table.width-table.offset,table.height-table.offset)//画行doc.setFontSize(15)doc.text("xxxxx股份有限公司",11,9);doc.line(table.offset,getRowY(1,table.colH),table.width-table.offset,getRowY(1,table.colH))//第二行文字doc.setFontSize(12)doc.text("物料代码", 3, getRowY(2,table.colH)-3);doc.text(contents[i].materialNo, 30+3, getRowY(2,table.colH)-3);//第二行列doc.line(30,getRowY(1,table.colH),30,getRowY(2,table.colH))doc.line(table.offset,getRowY(2,table.colH),table.width-table.offset,getRowY(2,table.colH))doc.text("物料名称", 3, getRowY(3,table.colH)-3);doc.setFontSize(10)doc.text(contents[i].materialName, 30+3, getRowY(3,table.colH)-3);doc.line(30,getRowY(2,table.colH),30,getRowY(3,table.colH))doc.line(table.offset,getRowY(3,table.colH),table.width-table.offset,getRowY(3,table.colH))doc.setFontSize(12)doc.text("供应商名称", 3, getRowY(4,table.colH)-3);doc.setFontSize(10)doc.text(contents[i].supplierName, 30+3, getRowY(4,table.colH)-3);doc.line(30,getRowY(3,table.colH),30,getRowY(4,table.colH))doc.line(table.offset,getRowY(4,table.colH),table.width-table.offset,getRowY(4,table.colH))doc.setFontSize(12)doc.text("物料数量", 3, getRowY(5,table.colH)-3);doc.text(contents[i].volume+contents[i].mainUnit, 30+3, getRowY(5,table.colH)-3);doc.line(30,getRowY(4,table.colH),30,getRowY(5,table.colH))doc.line(table.offset,getRowY(5,table.colH),table.width-table.offset,getRowY(5,table.colH))doc.text("发货日期", 3, getRowY(6,table.colH)-3);doc.text(new Date().toISOString().split("T")[0],30+3, getRowY(6,table.colH)-3);doc.line(30,getRowY(3,table.colH),30,getRowY(6,table.colH))doc.line(table.offset,getRowY(6,table.colH),table.width-table.offset,getRowY(6,table.colH))//绘制条码及二维码// doc.addImage()doc.addImage(contents[i].img, 'JPEG', 70, getRowY(6,table.colH)+1, 14, 14, '', 'FAST')doc.addImage(contents[i].barcode, 'JPEG', 10, getRowY(6,table.colH)+1,48, 14, '', 'FAST')}window.open(doc.output('bloburl'), '_blank');
}

3. 再放生成效果

4.效果及代码解析

生成pdf对象

 doc = new jsPDF({orientation: "landscape", //方向，这里是横向unit: table.unit, //单位，我这边用mmformat: [table.width, table.height] //声明pdf大小});

画线，横线竖线同理

 doc.line(2,2,30,2) //从（2，2）坐标往右画一条长度为30mm的横线

内容，设置内容前设置字体样式，需要中文的话需要单独下载中文ttf字体，然后转成js文件，放入项目中，ttf文件转js可使用这个链接，然后直接使用字体名导入即可

doc.setFont('jianbaosong');
doc.setFontSize(12)
doc.text("供应商名称", 3, getRowY(4,table.colH)-3);

画一维码，二维码；这里是把一二维码图片的base64添加进pdf

doc.addImage(contents[i].img, 'JPEG', 70, getRowY(6,table.colH)+1, 14, 14, '', 'FAST')

具体一维码二维码生成方式见下篇文档

前端条码打印方案(表格+中文+一维码+二维码)相关推荐

智沃邦条码扫码出入库管理系统仓库出入库管理系统一维码二维码系统
智沃邦条码出入库管理系统,将普通的商品进行重新编码,并自动生成的一维码或者二维码,通过扫描器进行扫描操作,实现商品的出入库业务.本系统由西安智沃邦信息科技有限公司开发. 一.系统简介: 1.本系统可以 ...
使用扫描软件扫描含有中文字符的二维码显示乱码?
在使用中琅领跑条码标签打印软件制作并打印二维码时,有些朋友也会遇到这种问题:使用扫描软件扫描含有中文字符的二维码时,扫描界面显示为一串问号(即乱码).是什么原因造成扫描中文乱码的呢?又该如何解决呢?今 ...
halcon视觉一维、二维码的区别-@龙熙视觉培训李杰
一维码(条形码) 一维条码即指条码条和空的排列规则,常用的一维码的码制包括:EAN码.39码.交叉25码.UPC码.128码.93码,ISBN码,及Codabar(库德巴码)等. 条码是由一组规则排列 ...
Andro Studio 基于Zing一维码二维码扫描代码
现在一维码二维码在我们的日常生活中使用如此的广泛,所以拥有扫码功能的APP变得非常普遍,一个安卓APP需要扫码功能就要用到zxing了,zxing是谷歌开源的让开发者更方便使用摄像头的库,而我们常用的 ...
STM32F407获取OV7670摄像头图像及上位机解码（一维码二维码）
STM32F407获取OV7670摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32F407对30万像素OV7670摄像头进行图像捕获,并通过串口将数据 ...
STM32H750获取OV5640摄像头图像及上位机解码（一维码二维码）
STM32H750获取OV5640摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32H750对500万像素OV5640摄像头进行图像捕获,并通过串口将数 ...
STM32F407获取OV2640摄像头图像及上位机解码（一维码二维码）
STM32F407获取OV2640摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32F407对200万像素OV2640摄像头进行图像捕获,并通过串口将数 ...
STM32H750获取OV2640摄像头图像及上位机解码（一维码二维码）
STM32H750获取OV2640摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32H750对200万像素OV2640摄像头进行图像捕获,并通过串口将数 ...
STM32H750获取OV7670摄像头图像及上位机解码（一维码二维码）
STM32H750获取OV7670摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32H750对30万像素OV7670摄像头进行图像捕获,并通过串口将数据 ...

前端条码打印方案(表格+中文+一维码+二维码)

前言