前端如何生成条形码---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:

 

OptionDefault valueType
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

 

posted @   雨夜看叶  阅读(24671)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae