安装

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# 方法详解：定义、调用、参数、默认值、返回值、命名参数、方法重载全解析

    C# Methods 方法是一段代码,只有在调用时才会运行. 您可以将数据(称为参数)传递给方法. 方法用于执行某些操作,也被称为函数. 为什么使用方法?为了重用代码:定义一次代码,然后多次使用. 创 ...

  2. C# Dev GridControl小结

    1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...

  3. HMS Core分析服务智能运营，“智能时机”上线，轻松提升Push点击

    对于运营者来说,消息推送一直是提升用户活跃与转化的重要工具,如何在提升转化的情况下,同时不降低用户的接受程度,这一直是运营不断追求的目标. 好的推送不只在于优质的推送内容,还需要把握合适的时机.在合适 ...

  4. JS启动Windows上的exe

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

  5. 【译】新的 MSBuild 编辑体验

    MSBuild 是 .NET 开发体验的基本组成部分,但它对新手和有经验的开发人员都具有挑战性.为了帮助开发人员更好地理解他们的项目文件,并访问需要直接编辑项目文件的高级功能,我们发布了一个实验性的 ...

  6. Web前端 - Vue

    <!-- id标识vue作用的范围 --> <div id="app"> <!-- {{}} 插值表达式,绑定vue中的data数据 --> { ...

  7. 如何基于香橙派AIpro对视频/图像数据进行预处理

    本文分享自华为云社区<如何基于香橙派AIpro对视频/图像数据进行预处理>,作者: 昇腾CANN. 受网络结构和训练方式等因素的影响,绝大多数神经网络模型对输入数据都有格式上的限制.在计算 ...

  8. CF1913C Game with Multiset 题解

    [题目描述] 你有一个空的多重集,你需要处理若干下列询问: ADD $ x $:加入一个数值为 $ 2^x $ 的元素到该多重集. GET $ w $:判断是否存在一个该多重集的子集,使得这个子集的所 ...

  9. Redis 7.0 Multi Part AOF的设计和实现

    ​简介:本文将详解Redis中现有AOF机制的一些不足以及Redis 7.0中引入的Multi Part AOF的设计和实现细节. Redis 作为一种非常流行的内存数据库,通过将数据保存在内存中,R ...

  10. 开源 1 年半 star 破 1.2 万的 Dapr 是如何在阿里落地的？

    简介: Dapr 是 2019 年 10 月微软开源的可移植.事件驱动分布式运行时,它使开发人员能够轻松地构建运行在云平台和边缘的弹性而微服务化的无状态和有状态的应用程序,从而降低基于微服务架构构建现 ...