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. IPV6配置

    云友“学渣王 ”在帖子里提到需要为阿里云ECS配置IP6地址,根据网上的一些信息,写此例.  如果要求是FQDN地址,请登录到您的域名控制面板,设置一条AAAA记录到新设置的IPv6隧道地址.  在阿 ...

  2. vue源码阅读（一）

    版本:2.5.17-beta.0 核心模块(src/core):包括组件.全局API.vue实例.对象属性监测系统.公共方法.虚拟dom.配置等模块 src/core/index.js import ...

  3. SyntaxError: invalid character in identifier(Python)

    在写博客时直接将博客上的代码复制运行后发现错误SyntaxError: invalid character in identifier,我以为是l(小L)写成了1,改了还是不行. 上网查了下,发现原来 ...

  4. c语言二级指针内存模型

    第一种: 指针数组作为输入参数 char *myArray[] = {"aaaaaa", "ccccc", "bbbbbb", " ...

  5. HBuilder

    什么是HBuilder? HBbuilder是DCloud(数字天堂)推出的一款支持HTML5的WEB开发IDE,主体是由java编写的,它将HTML/JS代码块进行代码封装,达到简单数据形成代码的特 ...

  6. 华大单片机开发板HC32F030上手入门

    HC32F030开发板(如下图所示)分为板载调试模块(左半部分)和MCU开发电路(右半部分).二者中间通过邮票孔相连,如果将板子从中间掰开,板载调试模块就可以当一个CMSIS-DAP的仿真器来使用.此 ...

  7. mysql新特性

    5.7新特性 sys库 document store X protocol json支持 空间数据 虚拟列 query rewrite plugin 表空间传输 innodb undo表空间 表空间管 ...

  8. uni-app第三方登陆-微信

    结合上文全局登陆校验,实现微信授权登录官方手册地址: https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo 一.书写两个界面 login. ...

  9. turtlebot3安装遇到的问题总结

    turtlebot3安装遇到的问题总结 问题如下 1.ubuntu mate 开机启动 开始试了很多方法都不行,注意不要输错用户名,不然进不了系统了(进不了解决方法,找个电脑读一下这个turtlebo ...

  10. 友金所招聘Java工程师面试题

    友金所是一家位于深圳南山科技园的P2P网贷公司,用友集团控股.该公司采用渐进式的问答面试,没有笔试题.比如面试者说熟悉多线程,面试官就问哪些方式解决并发:面试者说采用Synchronized或者Ree ...