前端如何⽣成条形码---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() {
}
toJsBarcode(){
// 调⽤ JsBarcode⽅法⽣成条形码
JsBarcode(this.barcode, "1234567890", {
text: "显⽰⽂案",
format: "CODE39",
displayValue: true,
width: 2.0,
height: 100,
margin: 0,
});
}svg canvas
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（设置条之间的宽度）2Number height（⾼度）100Number displayValue（是否在条形码下⽅显⽰⽂
字）
true Boolean text （覆盖显⽰的⽂本）undefined String fontOptions（使⽂字加粗体或变斜体）""String font（设置⽂本的字体）"monospace"String textAlign（设置⽂本的⽔平对齐⽅式）"center"String textPosition（设置⽂本的垂直位置）"bottom"String textMargin（设置条形码和⽂本之间的间
距）
2Number fontSize（设置⽂本的⼤⼩）20Number
background（设置条形码的背景）"#ffffff"String (CSS color)
lineColor（设置条和⽂本的颜⾊）"#000000"String (CSS color)
margin（设置条形码周围的空⽩边距）10Number 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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。