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. OSS内文件如何设置为无时间限制的下载链接

    OSS内文件如何设置为无时间限制的下载链接 想把一些文件上传到OSS里,把OSS当网盘用,做成分享的下载链接 发现获取的链接都是有时间限制的 有没有取消这个时间限制的功能或者方法 请将object的权 ...

  2. php 一行代码解决二维数组去重

    array_unique($array, SORT_REGULAR);

  3. 电子产品使用感受之——我的Mac只有256GB，我的照片库该怎么办？

    说实话我使用过的Mac中最大的默认存储可能就是2011年开始使用的MacBook Pro了,机器型号大概是MC700,这台机器当年自带320GB 5400转机械硬盘,直到2016年因为使用率太高,机械 ...

  4. PHP算法学习（2） 轮训加权算法

    2019年1月8日16:10:51 svn地址:svn://gitee.com/zxadmin/live_z    代码在code里面 <?php /* * 加权轮训算法 * * * $arr ...

  5. 关于JDBC的批量操作executeBatch()所引发sql语句异常

    java.sql.BatchUpdateException: You have an error in your SQL syntax; check the manual that correspon ...

  6. Java第四次实践作业

    1 编写“电费管理类”及其测试类.  第一步 编写“电费管理”类 1)私有属性:上月电表读数.本月电表读数 2)构造方法:无参.2个参数 3)成员方法:getXXX()方法.setXXX()方法 4 ...

  7. 聊天机器人開發好消息！！DIALOGFLOW與微信的天作之合！！

    虽然DIALOGFLOW暂未能够与微信(WECHAT)或企业微信(ENTERPRISE WECHAT)进行任何技制上的连接INTERGRATION),确实限制了我们这些聊天机器人开发者的创作空间,因为 ...

  8. oracle单字段拆分成多行

    已上图为例 先以逗号分隔拆分 拆分函数: CREATE OR REPLACE FUNCTION SPLIT(P_STRING VARCHAR2, P_SEP VARCHAR2 := ',') RETU ...

  9. ADB——管理应用

    ADB应用管理 主要操作有查看应用列表.安装应用.卸载应用.清楚应用数据与缓存.查看前台Activity.查看应用信息及安装路径等等 查看应用列表 查看应用列表的基本命令格式是 adb shell p ...

  10. Java面试题和解答(一)

    1.说说JVM原理?内存泄露与溢出区别,何时产生内存泄露? JVM原理 :http://www.cnblogs.com/jiayi/archive/2010/06/08/1753863.html 内存 ...