使用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
React 生成条形码代码 注:需引入 jsbarcode 插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class ...
- 生成条形码插件 条形码--JsBarcode
每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE128 ...
- js生成条形码——JsBarcode
原文地址:https://www.cnblogs.com/huangenai/p/6347607.html 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE12 ...
- js自动生成条形码插件-JsBarcode
JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- js生成条形码插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用js生成条形码以及二维码
一.用js生成条形码这种业务场景不是很常见的,最近刚好又接到这种需求 Google一下,发现github还真有这方面的轮子,感谢github,省去了我们很多造轮子的过程, 好了言归正传,首先引入jsb ...
- js生成条形码
生成条形码 <body> <div> <img id="ma"/> </div> </body> </html&g ...
- react 中使用 JsBarcode 显示条形码
import React from 'react';import JsBarcode from 'jsbarcode'; export class RefundSheet extends React. ...
- C# 在Word文档中生成条形码
C# 在Word文档中生成条形码 简介 条形码是由多个不同的空白和黑条按照一定的顺序组成,用于表示各种信息如产品名称.制造商.类别.价格等.目前,条形码在我们的日常生活中有着很广泛的应用,不管是在图书 ...
- 使用html2canvas实现批量生成条形码
/*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...
随机推荐
- MogDB-opengauss中的聚集与分组操作
MogDB/opengauss 中的聚集与分组操作 COUNT:对结果集中的元组数量进行计数,如果是 COUNT(*),那么会统计所有元组(包括 NULL 值)的数量,如果是 COUNT(colnam ...
- Python3学习－－正则表达式
import rer = re.match("Chen\d+","Chen123ronghua123")r = re.match(".+", ...
- Hive 查看，删除分区
查看所有分区 show partitions 表名; 删除一般会有两种方案 1.直接删除hdfs文件 亲测删除hdfs路径后 查看分区还是能看到此分区 可能会引起其他问题 此方法不建议 2. 使用删除 ...
- 重新点亮shell————语法[四]
前言 简单介绍一下语法. 正文 数组: 定义数组: IPTS =(10.0.0.1 10.0.0.2 10.0.0.3) 显示所以数组元素: echo ${IPTS[@]} 显示数组元素的个数 ech ...
- 重新点亮linux 命令树————rpm软件包管理[十一七]
前言 简单介绍一下软件管理 正文 软件包管理器 rpm 包和rpm 命令 yum 仓库 源代码编译安装 内核升级 grub配置文件 软件包管理器: 包管理器是为了方便软件安装.卸载,解决软件依赖关系的 ...
- mysql 重新整理——存储引擎[三]
前言 要知道存储引擎这个东西,不是存储的意思,而是io操作. MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛 ...
- python实现：有一个列表为num_list，找到一个具有最大和的连续子列表，返回其最大和。
# 有一个列表为num_list,找到一个具有最大和的连续子列表,返回其最大和.# 示例:# 输入: [-3,1,-1,6,-1,2,4,-5,4]# 输出: 11# 解释: 连续子数组 [6,-1, ...
- Python中2种常用数据可视化库：Bokeh和Altair
本文分享自华为云社区<探究数据可视化:Bokeh vs. Altair>,作者:柠檬味拥抱. 在数据科学和数据分析领域,数据可视化是一种强大的工具,可以帮助我们更好地理解数据.发现模式和趋 ...
- 记一次WPF的DataGrid绑定数据
之前一直在用winform,但是感觉界面不好看,然后就自己在网上学习WPF.一开始看到DataGrid的时候,还以为它是DataGridView,然后用winform的方法绑定数据发现不行,在不断的查 ...
- 力扣142(Java)-环形链表Ⅱ（中等）
题目: 给定一个链表的头节点 head ,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环. 为了表示 ...