使用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

相关文章
|
3月前
uniapp生成条形码?
uniapp生成条形码?
|
4月前
|
算法 开发工具 计算机视觉
条形码识别研究
条形码识别研究
|
10月前
|
机器学习/深度学习 计算机视觉
定位和读取图像中的多个条形码
定位和读取图像中的多个条形码。
161 0
定位和读取图像中的多个条形码
|
11月前
|
数据库
导出矢量条码二维码的方法
码在设计印刷行业,经常使用导入到Coreldraw或Illustrator等矢量环境排版使用。矢量条码最大的优点是无论你将它放大、缩小或旋转等它都有一样平滑的边缘, 一样的清晰度,不会失真。
80 1
|
边缘计算 并行计算 算法
Opencv+ZBar识别条形码、二维码
Opencv+ZBar识别条形码、二维码
608 0
Opencv+ZBar识别条形码、二维码
制作条形码的手机App推荐
条形码自发明以来,给我们的生活带来极大便利,怎么才能快速的用手机创建条形码呢?下面就给大家介绍一款小编常用的制作条形码的App--二维码和条形码生成器。使用它,不仅可以制作条形码、制作二维码,还能快速扫描二维码和条形码,并且支持查看制作和扫描的历史,功能强大,关键还是免费的!
|
算法 前端开发
距离相等的条形码
🎈今天给大家带来的是算法练习,题目为"距离相等的条形码"。
80 0
|
移动开发
H5 使用jsBarcode qrcodejs 生成二维码 条形码
H5 使用jsBarcode qrcodejs 生成二维码 条形码
H5 使用jsBarcode qrcodejs 生成二维码 条形码
|
程序员 C# 图形学
C# 生成二维码,彩色二维码,带有Logo的二维码及普通条形码
每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默。我眼中的程序员大多都不爱说话,默默承受着编程的巨大压力,除了技术上的交流外,他们不愿意也不擅长和别人交流,更不乐意任何人走进他们的内心!    废话少说,咱直接进入正题:    目前来说,比较流行的二维码生成方式有两种:一种是:QrCode.Net和谷歌的Zxing.Net,我个人比较倾向于使用ZXing.Net,今天本篇博客主要讲解Zxing.Net的使用。
1888 0