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. 一键安装metasploit(linux,os x)

    curl https://raw.githubusercontent.com/rapid7/metasploit-omnibus/master/config/templates/metasploit- ...

  2. MVC 向页面传值方式总结（1）

    ViewData传值. HomeController.cs Co de: public ActionResult Index() {       ViewData["Title"  ...

  3. 常用的当前时间（返回String类型）

    public class TimeUtil { /** * 创建人:zhiyuan * 创建时间:2018年6月9日上午11:31:02 * 方法描述:以yyyy-MM-dd查询当前时间 */ pub ...

  4. 引用：使用grunt 压缩 合并js、css文件

    引用:https://www.jianshu.com/p/08c7babdec65 压缩 js 文件 1.创建一个目录 名为grunt   目录.png 2.在grunt目录下创建一个 src目录,存 ...

  5. Dynamics365 WebAPI ADFS token 获取

    public class CrmAuth { ///<summary> /// Token /// </summary> public string access_token ...

  6. linux常用命令简述

    新的公司,新的挑战.对于php的有点老油条来说,是一个不错的历练机会.调整自己,归零心态.永不放弃学习! 言归正传. 1.查找 find 主要用于做文件夹的查找. find hosts grep用于查 ...

  7. iview 表单非空验证

    rules: { title: [ {required: true, message: '请填写栏目名称', trigger: 'blur'} ], desc: [ {required: true, ...

  8. rabbit_mq实现分布式事务

    gitlab下载地址: 一.rabbitmq实现原理 一般在自己内部系统中建议采用lcn刚性事务来处理,面对调用第三方接口,或者夸平台语言是采用消息中间来实现补偿型事务.注意在进行补偿时需要注意重复调 ...

  9. Linux-004-解决 Tomcat 启动时提示 Insufficient space for shared memory file

    今天在帮同事定位问题时,定位服务发现有服务无法访问,发现在 Linux 启动 tomcat 时,提示如下信息: 即服务提示共享内存空间不足,可以使用 -Djava.io.tmpdir 参数指定期本地临 ...

  10. VSS(Virtual Switching System)

    一.虚拟交换系统(VSS) VSS是一种网络虚拟化技术,讲两台Catalyst 6500系列交换机组合为单一虚拟交换机,从而提高运营效率.增强不间断通信,并将系统带宽容量扩展到1.4Tbps.在初始阶 ...