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的更多相关文章

  1. js生成条形码——JsBarcode

    原文地址:https://www.cnblogs.com/huangenai/p/6347607.html 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE12 ...

  2. Vue 生成条形码 jsbarcode的使用

    安装依赖包 npm install jsbarcode --save 在使用页面引入依赖包 import JsBarcode from 'jsbarcode' 定义img标签和id <img i ...

  3. 生成条形码插件 条形码--JsBarcode

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE128 ...

  4. js自动生成条形码插件-JsBarcode

    JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. 条形码--JsBarcode

    介绍一下在GitHub生成条形码的js插件→JsBarcode 支持的条形码: 条码支持的有: CODE128  CODE128 (自动模式切换)  CODE128 A/B/C (强制模式)EAN  ...

  6. js生成条形码插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 使用js生成条形码以及二维码

    一.用js生成条形码这种业务场景不是很常见的,最近刚好又接到这种需求 Google一下,发现github还真有这方面的轮子,感谢github,省去了我们很多造轮子的过程, 好了言归正传,首先引入jsb ...

  8. js生成条形码

    生成条形码 <body> <div> <img id="ma"/> </div> </body> </html&g ...

  9. C# 在Word文档中生成条形码

    C# 在Word文档中生成条形码 简介 条形码是由多个不同的空白和黑条按照一定的顺序组成,用于表示各种信息如产品名称.制造商.类别.价格等.目前,条形码在我们的日常生活中有着很广泛的应用,不管是在图书 ...

随机推荐

  1. C语言面试题分类->位运算

    1.不用临时变量交换两个整数. a = a ^ b; b = a ^ b; a = a ^ b; 2.实现一个函数,输入一个整数,输出该数二进制表示中1的个数.例如9的二进制是1001,则输出2. i ...

  2. 在利用node连接数据库遇到的问题

    本文持续更新 选择数据库时: connection.query('USE ' + dbName,function(err,rows){ //注意USE后面需要加一个空格,最终才能拼成> USE ...

  3. 如何查询注册表的值及 Powershell 应用

    利用 c:\windows\system32\reg.exe 的 query 参数即可. reg.exe 的参数如下: C:\windows\system32> reg.exe /?REG Op ...

  4. verilog 之流水灯

    1.黑金板 简易操作: 通过判断数值累加    个人观点:黑金代码质量有待提高,讲解不够详细 2.正点原子的 位置调换 led[:] <= {led[:],led[]}; 3.传统位移 led& ...

  5. ubus socket always in connecting status

    When we try to transplant ubus to uclinux, ubusd can't run but "ubus list" will hang up. 1 ...

  6. OO第二次博客作业--第二单元总结

    第一次作业 1. 设计策略 第一次作业,一共三个线程,主线程.输入线程和电梯线程,有一个共享对象--调度器(队列). 调度的策略大多集中到了电梯里,调度器反而只剩下一个队列. 2. 基于度量的分析 类 ...

  7. 温习排序算法（基于C指针）

    以前学过的数据结构课,貌似已经忘得一干二净了,偶然又翻起,书中最后一章详细介绍了7种排序算法,现在对其中4种做个总结.(为啥只总结4种,当然是因为偷懒,只想总结简单又常用的!) 先贴一张排序分类图: ...

  8. spring-boot mybatis配置

    接着我们的spring boot项目,spring boot如何使用mybatis访问数据库呢? 个人习惯使用mapper接口和xml配置sql,从pom.xml入手 1.1 添加依赖 <dep ...

  9. 导出IndoorGML

    导出IndoorGML

  10. [py]pandas数据统计学习

    pandas.core.base.DataError: No numeric types to aggregate错误规避 我没有去解决这个问题, 而用填充0规避了这个问题 统计 聚合 d = [ { ...