标签：条形码 String JsBarcode 前端 Number 设置 文本
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
标签：条形码,String,JsBarcode,前端,Number,设置,文本 来源： https://www.cnblogs.com/dreambin/p/10570873.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。