安装

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++ While 和 For 循环：流程控制全解析

    C++ Switch 语句 使用 switch 语句选择要执行的多个代码块之一. 语法 switch(expression) { case x: // 代码块 break; case y: // 代码 ...

  2. 一图读懂HUAWEI HiAI Foundation

    作为华为端侧AI的创新开放平台,HMS Core的HUAWEI HiAI Foundation开放AI算力,助力AI应用高效开发,同时联合多领域打造AI生态,实现日调用600亿次的突破,助力AI生态繁 ...

  3. 使用PTK卸载数据库时删除用户失败怎么办？

    使用 PTK 卸载数据库时删除用户失败怎么办? 背景介绍: PTK (Provisioning Toolkit)是一款针对 MogDB 数据库开发的软件安装和运维工具,旨在帮助用户更便捷地安装部署 M ...

  4. recover database until cancel

    数据库演示版本为 12.1.0.2 该系列涉及恢复过程中使用的 5 个语句: 1. recover database 2. recover database until cancel 3. recov ...

  5. [Java SE] 经典问题：超出Java Long型(8字节/64位)的二进制比特流数据如何进行大数的数值计算？

    0 问题描述 经典问题:超出Java Long型(8字节/64位)的二进制比特流数据如何进行大数的数值计算? 近期工作上遇到了这个问题:需要将一个无符号数.且位长>=8字节(等于8字节时,首位b ...

  6. redis 简单整理——哨兵简单介绍[二十八]

    前言 简单介绍一下哨兵模式. 正文 Redis的主从复制模式下,一旦主节点由于故障不能提供服务,需要人 工将从节点晋升为主节点,同时还要通知应用方更新主节点地址,对于很多 应用场景这种故障处理的方式是 ...

  7. (二)asyncio的简单使用，python异步高效处理数据，asyncio.get_event_loop()，loop.run_until_complete(main())，loop.close()

    Asyncio 是一个基于事件循环的异步I/O框架,它提供了高效的协程实现,能够轻松地编写高并发的Python程序.Asyncio 在 Python 3.4 中首次引入,它的核心是事件循环(Event ...

  8. 力扣570(MySQL)-至少有5名直接下属的经理（简单）

    题目: Employee 表包含所有员工和他们的经理.每个员工都有一个 Id,并且还有一列是经理的 Id. 给定 Employee 表,请编写一个SQL查询来查找至少有5名直接下属的经理.对于上表,您 ...

  9. selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PATH.的解决办法

    跟着视频学习python爬取网页信息,结果出现如下问题: 在网页上搜索各种资料,最终解决该问题,所以记录一下: 1.查看自己浏览器的版本号,点击"三个点--帮助--关于Google Chro ...

  10. Pygame安装以及解决问题：Try to run this command from the system terminal. Make sure that you use the correct version of 'pip......

    在这里记录一下我的安装过程: 1.首先找到自己python程序安装目录下的Scripts文件夹(里面有pip这里面): 2.使用快捷键win + R 打开终端,先进入到安装python的盘符,然后进入 ...