安装

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. 【译】如何在 Visual Studio 中安装 GitHub Copilot

    GitHub Copilot 简介 GitHub Copilot 是一个新工具,可以帮助您在人工智能的帮助下更快,更智能地编写代码.它可以建议代码补全,生成代码片段,甚至为您编写整个函数.GitHub ...

  2. Qt调用动态库的三种方式（linux）

    本文章主要记录Qt在linux电脑上调用so库的三种调用方式 方式一:静态加载so库 方式二:动态加载so库(QLibrary) 方式三:动态加载so库(dlopen)   其他: 封装的so库叫做: ...

  3. 【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit（3）

    1.问题描述: 调用HarmonyOS API发送通知,能查到状态是送达终端设备,但是终端设备上没收到通知卡片. 解决方案: 通知应用大图标不能超过30kb,通知参数限制,参考如下:https://g ...

  4. 免费报表工具零代码零基础轻松搞定 web 报表

    话说,能制作清单式报表的方式有千千万: 骨灰级的 Excel 控,如果能轻车熟路驾驭 VBA,也能玩出各种花来,再不济借助图表插件外援也能秒杀一众小白选手: 传说中的编程控,只要需求明确没什么做不了的 ...

  5. k8s 深入篇———— docker 是什么[一]

    前言 简单的整理一下一些基本概念. 正文 简单运行一个容器: 创建一个容器: docker run -it busybox /bin/bash 然后看下进程: ps -ef 做了一个障眼法,使用的是p ...

  6. 牛客网-SQL专项训练18

    ①在下列sql语句错误的是?B 解析: 在sql中若要取得NULL,则必须通过IS NULL或者IS NOT NULL进行获取,无法直接使用等号. 一个等号(=)表示把1赋值给变量啊 ==:称为等值符 ...

  7. HMS数据库设置和优化

    简介:Hive Metastore (HMS) 是一种服务,用于在后端 RDBMS(例如 MySQL 或 PostgreSQL)中存储与 Apache Hive 和其他服务相关的元数据.本文主要分享H ...

  8. 【详谈 Delta Lake 】系列技术专题 之 特性（Features）

    简介: 本文翻译自大数据技术公司 Databricks 针对数据湖 Delta Lake 的系列技术文章.众所周知,Databricks 主导着开源大数据社区 Apache Spark.Delta L ...

  9. 为什么Spring仍然会是云原生时代最佳平台之一？

    简介: 基于Java语言的Spring生态,还能否适应新的开发方式,比如Cloud Native.Serverless.Faas等,它还会是云原生时代的最佳平台的选择吗?本文将从5个角度来为你分析一下 ...

  10. AI和大数据结合，智能运维平台助力流利说提升核心竞争力

    简介: 简介:本文整理自数智创新行--智能运维专场(上海站),流利说最佳实践演讲:<基于SLS千万级在线教育平台统一监控运营实践> 作者:孙文杰 流利说运维总监元乙 阿里云智能技术专家 优 ...