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

React 生成条形码代码

HTML 生成条形码代码

JsBarcode参数All Options:

JsBarcode安装: