使用jsbarcode生成条形码

发布时间:2021-04-29 发布网站:https://www.cnblogs.com/guojikun
前端之家收集整理的这篇文章主要介绍了使用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

总结


以上是前端之家为你收集整理的使用jsbarcode生成条形码全部内容,希望文章能够帮你解决使用jsbarcode生成条形码所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。