前端如何生成条形码---JsBarcode
React 生成条形码代码
注：需引入 jsbarcode 插件
import React from 'react';
import JsBarcode from 'jsbarcode'; class Widget extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 1234567890, //由父组件传入用来生成条形码的字符串“barCode”
};
} componentDidMount() {
this.toJsBarcode();
} toJsBarcode(){
// 调用 JsBarcode方法生成条形码
JsBarcode(this.barcode, "1234567890", {
text: "显示文案",
format: "CODE39",
displayValue: true,
width: 2.0,
height: 100,
margin: 0,
});
}
render() {
return (
<div className="barcode-box">
<svg
ref={(ref) => {
this.barcode = ref;
}}
/>
</div>
);
}
}
export default Widget;
HTML 生成条形码代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/JsBarcode.all.js"></script>
</head>
<body>
<svg id="svgcode"></svg>
<!-- or -->
<canvas id="canvascode"></canvas>
<!-- or -->
<img id="imgcode" />
<script>
$("#svgcode").JsBarcode('显示文案'); $("#canvascode").JsBarcode('显示文案'); $("#imgcode").JsBarcode("显示文案");
</script>
</body>
</html>
生成条形码如图：
注意：引用 JsBarcode 最好是引用 JsBarcode.all.min.js 这个js包，它支持所有条形码！
JsBarcode参数All Options:
| Option | Default value | Type |
|---|---|---|
| format（选择要使用的条形码类型） | "auto" (CODE128) | String |
| width（设置条之间的宽度） | 2 | Number |
| height（高度） | 100 | Number |
| displayValue（是否在条形码下方显示文字） | true | Boolean |
| text （覆盖显示的文本） | undefined | String |
| fontOptions（使文字加粗体或变斜体） | "" | String |
| font（设置文本的字体） | "monospace" | String |
| textAlign（设置文本的水平对齐方式） | "center" | String |
| textPosition（设置文本的垂直位置） | "bottom" | String |
| textMargin（设置条形码和文本之间的间距） | 2 | Number |
| fontSize（设置文本的大小） | 20 | Number |
| background（设置条形码的背景） | "#ffffff" | String (CSS color) |
| lineColor（设置条和文本的颜色） | "#000000" | String (CSS color) |
| margin（设置条形码周围的空白边距） | 10 | Number |
| marginTop（设置条形码上方的空白边距） | undefined | Number |
| marginBottom（设置条形码下方的空白边距） | undefined | Number |
| marginLeft（设置条形码左边的空白边距 | undefined | Number |
| marginRight（设置条形码右边的空白边距） | undefined | Number |
| flat | false | Boolean |
| valid | function(valid){} | Function |
JsBarcode安装:
npm install jsbarcode --save npm install jsbarcode
前端如何生成条形码---JsBarcode的更多相关文章
- js生成条形码——JsBarcode
原文地址:https://www.cnblogs.com/huangenai/p/6347607.html 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE12 ...
- Vue 生成条形码 jsbarcode的使用
安装依赖包 npm install jsbarcode --save 在使用页面引入依赖包 import JsBarcode from 'jsbarcode' 定义img标签和id <img i ...
- 生成条形码插件 条形码--JsBarcode
每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE128 ...
- js自动生成条形码插件-JsBarcode
JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 条形码--JsBarcode
介绍一下在GitHub生成条形码的js插件→JsBarcode 支持的条形码: 条码支持的有: CODE128 CODE128 (自动模式切换) CODE128 A/B/C (强制模式)EAN ...
- 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 ...
- C# 在Word文档中生成条形码
C# 在Word文档中生成条形码 简介 条形码是由多个不同的空白和黑条按照一定的顺序组成,用于表示各种信息如产品名称.制造商.类别.价格等.目前,条形码在我们的日常生活中有着很广泛的应用,不管是在图书 ...
随机推荐
- String对象方法属性总结
常用属性: constructor;length;prototype;(不在解释): 常用方法: charAt(index);返回指定位置的字符. concat(stringX);连接字符串. ind ...
- MySQL 详细学习笔记 转
Windows服务 -- 启动MySQL net start mysql -- 创建Windows服务 sc create mysql binPath= mysqld_bin_path(注意:等号与值 ...
- 平安银行在开源技术选型上的思考和实践 RocketMQ
小结: 1. https://mp.weixin.qq.com/s/z_c5D8fvHaYvHSczm0nYFA 平安银行在开源技术选型上的思考和实践 平安银行·吴建峰 阿里巴巴中间件 3月7日 随着 ...
- [Day16]常用API(正则表达式、Date类、DateFormat类、Calendar类)
1.正则表达式(Regular Expression,regex)-是一个字符串,使用单个字符串来描述.用来定义匹配规则,匹配一系列符合某个句法规则的字符串 1.1匹配规则: (1)字符:x -代表的 ...
- Sessions Hang on row cache lock
Sessions Hang on "row cache lock" (dc_objects) While Creating & Dropping a Table Concu ...
- 解决 warning I tensorflow/core/platform/cpu_feature_guard.cc:141] Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2
只需要加载如下代码: import os os.environ['
- SpringCloud第六步：搭建分布式配置中心
什么是配置中心 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud con ...
- xgboost 最优参数, df某一个字段进行字符串搜索
0.909323 with: {'max_depth': 6, 'min_child_weight': 0.8, 'n_estimators': 800} df_huoguo = df[df.c ...
- 使用TCP通信文件上传
客服端读取本地文件,吧文件上传到服务器,服务器在吧上传的文件保存到服务器硬盘上方法分析1:客户端使用本地字节输入流读取要上传的文件 2:客户端使用网络字节输出流,吧读取到的文件上传到服务器 3:服务器 ...
- 一张图解释IaaS,PaaS,SaaS
图片来源于MVA教程:快速入门——面向IT专业人员的Windows Azure IaaS