使用jsbarcode生成条形码

简介: 使用jsbarcode生成条形码

安装

yarn add jsbarcode

使用

// HTMLElement 承载条形码的元素  svg/canvas
// text 显示在条形码下方的文字
// option  条形码的配置项 具体见【条形码的配置项】
JsBarcode(HTMLElement, text, option)

条形码的配置项

使用中的option

background: "#ffffff"  // 背景色
displayValue: true // 是否显示条形码下面的文字
font: "monospace" // 字体
fontOptions: "" // 字体相关的配置
fontSize: 20 // 字体大小 默认20
format: "CODE128" // 条形码的种类 具体见 format
height: 40 // 高度
lineColor: "#000000" // 条形码线条的颜色
margin: 8 // 条形码四种的间距 类似于div的padding
marginBottom: 8 // 下边距
marginLeft: 8 // 左边距
marginRight: 8 // 右边距
marginTop: 8 // 上边距
text: undefined 
textAlign: "center" // 条形码下面的文字的对齐方式
textMargin: 2 
textPosition: "bottom" // 条形码下面文字的位置

条形码的种类

条形码的配置项选项中的format的值

CODE128
    CODE128 (自动模式切换)
    CODE128 A/B/C (强制模式)
EAN
    EAN-13
    EAN-8
    EAN-5
    EAN-2
    UPC (A)
CODE39
ITF-14
MSI
    MSI10
    MSI11
    MSI1010
    MSI1110
Pharmacode
Codabar

相关文章
|
Java Linux iOS开发
Typora最新版破解, 2022年11.7破解成功
Typora最新版破解, 2022年11.7破解成功, 支持Linux, Windows, Mac三端破解, 你值得拥有哦
|
弹性计算 Java Linux
手把手教你把Springboot项目部署到阿里云教程
手把手教你把Springboot项目部署到阿里云教程成功连接远程云服务器和配置阿里云安全组
2212 1
|
定位技术
Echarts实战案例代码(10):echarts结合世界所有国家地图数据集geojson的(英文翻译映射)解决方案
Echarts实战案例代码(10):echarts结合世界所有国家地图数据集geojson的(英文翻译映射)解决方案
1196 0
Echarts实战案例代码(10):echarts结合世界所有国家地图数据集geojson的(英文翻译映射)解决方案
|
2月前
|
JavaScript 前端开发
for of和 for in的区别
JavaScript中,for...of遍历可迭代对象的值,适合数组;for...in遍历对象属性,注意其遍历顺序不确定且包括继承属性,可用hasOwnProperty判断自身属性。同步指任务依次执行,异步则通过回调或事件实现非阻塞执行,适用于耗时任务如网络请求。常见异步方式包括定时器、接口调用、事件监听。
142 0
|
关系型数据库 MySQL 数据安全/隐私保护
允许远程链接mysql,开放3306端口
允许远程链接mysql,开放3306端口
允许远程链接mysql,开放3306端口
|
存储 缓存 JSON
详解HTTP四种请求:POST、GET、DELETE、PUT
【4月更文挑战第3天】
66447 4
详解HTTP四种请求:POST、GET、DELETE、PUT
|
6月前
|
机器学习/深度学习 编解码 自然语言处理
SigLIP 2:多语言语义理解、定位和密集特征的视觉语言编码器
SigLIP 2 是一种改进的多语言视觉-语言编码器系列,通过字幕预训练、自监督学习和在线数据管理优化性能。它在零样本分类、图像-文本检索及视觉表示提取中表现卓越,支持多分辨率处理并保持图像纵横比。模型提供 ViT-B 至 g 四种规格,采用 WebLI 数据集训练,结合 Sigmoid 损失与自蒸馏等技术提升效果。实验表明,SigLIP 2 在密集预测、定位任务及多模态应用中显著优于前代和其他基线模型。
497 9
SigLIP 2:多语言语义理解、定位和密集特征的视觉语言编码器
|
存储 开发框架 前端开发
在Vue&Element前端项目中,对于字典列表的显示处理
在Vue&Element前端项目中,对于字典列表的显示处理
|
10月前
|
JavaScript 前端开发
不懂module.exports、exports、export的区别,我惨遭diss
【10月更文挑战第22天】不懂module.exports、exports、export的区别,我惨遭diss
|
前端开发 数据安全/隐私保护
【前端web入门第二天】02 表单-input标签-单选框-多选框
本文介绍了HTML中`<input>`标签的基本使用方法及其应用场景,如登录、注册页面和搜索区域。通过设置`type`属性,可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外,还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态,并提供了示例代码与效果展示。
480 7