安装

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生成条形码的更多相关文章

  1. 前端如何生成条形码---JsBarcode

    React 生成条形码代码 注:需引入 jsbarcode 插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class ...

  2. 生成条形码插件 条形码--JsBarcode

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE128 ...

  3. js生成条形码——JsBarcode

    原文地址:https://www.cnblogs.com/huangenai/p/6347607.html 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE12 ...

  4. js自动生成条形码插件-JsBarcode

    JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. js生成条形码插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 使用js生成条形码以及二维码

    一.用js生成条形码这种业务场景不是很常见的,最近刚好又接到这种需求 Google一下,发现github还真有这方面的轮子,感谢github,省去了我们很多造轮子的过程, 好了言归正传,首先引入jsb ...

  7. js生成条形码

    生成条形码 <body> <div> <img id="ma"/> </div> </body> </html&g ...

  8. react 中使用 JsBarcode 显示条形码

    import React from 'react';import JsBarcode from 'jsbarcode'; export class RefundSheet extends React. ...

  9. C# 在Word文档中生成条形码

    C# 在Word文档中生成条形码 简介 条形码是由多个不同的空白和黑条按照一定的顺序组成,用于表示各种信息如产品名称.制造商.类别.价格等.目前,条形码在我们的日常生活中有着很广泛的应用,不管是在图书 ...

  10. 使用html2canvas实现批量生成条形码

    /*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...

随机推荐

  1. C语言 05 变量与常量

    变量 变量就像在数学中学习的 x,y 一样,可以直接声明一个变量,并利用这些变量进行基本的运算,声明变量的格式为: 数据类型 变量名称 = 初始值;(其中初始值可以不用在定义变量时设定) = 是赋值操 ...

  2. openGauss社区入门（openGauss-定时任务）

    为什么要使用定时任务 在一个固定的时间点活间隔一段时间需要频繁触发某一动作,为了使用便捷,有了定时任务,极大的减少了工作的重复性,提高了效率. 定时任务的内容 基于定时任务产生的背景,定时任务内容包括 ...

  3. 攻防世界 debug

    题目 分析过程 丢到PE里面 一开始,我看到下面的脱壳提示,以为是我没见过的壳,下载了相关工具脱壳--发现脱了后又出现没见过的脱壳提示,根据提示脱壳弄出来的东西怪怪的 卡题,查了资料 学到一个新知识点 ...

  4. 实验2 C语言分支与循环基础应用编程

    #include <stdio.h> #include <stdlib.h> #include <time.h> #define N 5 int main() { ...

  5. WEB 版的报表工具有没有意义？

    这个问题得从两个方面看. 如果这个 web 版的报表工具指的是现在的自助报表,也就是 BI.多维分析,那它是有意义的, 而且各厂商们都已经做的挺好,可以让业务人员通过简单的拖拽进行各种数据分析,生成自 ...

  6. 【SSH通道数据库连接池】连接远程linix服务器上面的mysql

    首先,我用的是阿里的druid数据库连接池,其次,需要第三方jar包,maven坐标如下: <dependency> <groupId>com.jcraft</group ...

  7. vue中执行异步函数async和await的用法

    在开发中,可能会遇到两个或多个函数异步执行的情况,对于Vue中函数的异步函数执行做了一个小总结,如下: 异步执行使用async和await完成 created() { this.init() }, m ...

  8. 第12課-Mirth生产环境宕机后基于服务配置XML备份恢复之记录

    Mirth Connect作为集成交换平台,生产环境互联互通了众多系统,脑残的是连自家关键业务系统都依托mirth来进行交互,宕机或故障对身处其中的一次紧张的业务系统升级都造成高度的精神紧张:这种宕机 ...

  9. 毕业两年升主管，自沉稳而后顾人 对话阿里云MVP陈琦

    所有伟大都源于一个勇敢的开始 我跟可视化结缘是一个巧合,一开始并没有很笃定要做这个方向.2015年可视化的市场还不繁荣,我在创业公司实习,跟领导层一起参加各种创业大赛路演,当时我做的主要工作就是和领导 ...

  10. Flink 在顺丰的应用实践

    ​简介: 顺丰基于 Flink 建设实时数仓的思路,引入 Hudi On Flink 加速数仓宽表,以及实时数仓平台化建设的实践. 本⽂由社区志愿者苗文婷整理,内容源⾃顺丰科技大数据平台研发工程师龙逸 ...