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. 测试自动化学习3-python3简单操作

    1.列表操作 增 stu = []stus.append('lili') #在list的末尾增加一个元素 stus.insert(9,'yjk') #在指定的位置插入元素, 查 print('单个取, ...

  2. WPF DataGrid分页功能实现代码

    在Silverlight中DataGrid分页可以结合DataPager控件很容易实现,但是在WPF中没有类似的,需要手动实现这样一个控件: 1.创建一个UserControl,DP.xaml,代码如 ...

  3. Eclipse中STM32工程建立步骤

    前段时间一直在折腾linux系统上STM32的开发,网上一顿搜,费劲九牛二虎之力终于把环境搭好了(现在都有点忘了,后面再折腾环境搭建一定要写个教程,今天先不写了)． 自从环境搭好之后,就基本抛弃MDK ...

  4. spark-sql分组去重总数统计uv

    SparkConf sparkConf = new SparkConf(); sparkConf .setAppName("Internal_Func") .setMaster(& ...

  5. 一对多关联模型,BELONGS_TO

    先分别创建三张表:test_user   test_message test_user 表里有id.name字段 test_message 表里有id.content.uid字段 然后建立一个Mode ...

  6. 10、jeecg 默认为空的字段值是如何被填充的?

    1.前言 用过 jeecg 的小伙伴,在 jeecg 实体中常见下面几个字段: /**创建人名称*/ private java.lang.String createName; /**创建人登录名称*/ ...

  7. POJ2762 Going from u to v or from v to u? 强连通分量缩点+拓扑排序

    题目链接:https://vjudge.net/contest/295959#problem/I 或者 http://poj.org/problem?id=2762 题意:输入多组样例,输入n个点和m ...

  8. 《图解HTTP》读书笔记（五：HTTP报文结构）

    用于 HTTP 协议交互的信息被称为 HTTP 报文. 请求端(客户端) 的HTTP 报文叫做请求报文, 响应端(服务器端) 的叫做响应报文.HTTP 报文本身是由多行(用 CR+LF 作换行符) 数 ...

  9. git 解决授权失败的方法

    git 提示  fatal: Authentication failed for 'http://***********‘’得解决方法 首先用 git config --list 查看一下 如果不对, ...

  10. 2019年IntelliJ IDEA 最新注册码，亲测可用（截止到2020年3月11日）

    2019年IntelliJ IDEA 最新注册码(截止到2020年3月11日) 操作步骤: 第一步:  修改 hosts 文件 ~~~ 在hosts文件中,添加以下映射关系: 0.0.0.0 acco ...