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"><svgref={(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 --savenpm install jsbarcode

前端如何生成条形码---JsBarcode相关推荐

html如何生成条形码,前端如何生成条形码---JsBarcode
React 生成条形码代码注:需引入 jsbarcode 插件 import React from 'react'; import JsBarcode from 'jsbarcode'; class ...
vue中生成条形码(jsbarcode)、二维码(qrcodejs2)
1.条形码插件jsbarcode 安装:npm install jsbarcode --save 引入:在需要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode ...
前端js html转换成pdf可下载打印；前端js可批量生成条形码；前端js可批量生成二维码，生成letter标签
注意:本文调试的是letter纸尺寸前端js html转换成pdf可下载打印 html2canvas + jspdf 前端js生成条形码 Options · lindell/JsBarcode ...
JS生成条形码/二维码 barcode.js、JsBarcode
JS生成条形码/二维码 barcode.JsBarcode JsBarcode Barcode.js 以下代码均非纯原创.新手小白.网上一搜一大把的概念也不写了,直接上可运行的代码及遇到的小坑. Js ...
vue 项目中生成条形码（jsbarcode）
条形码插件介绍和使用安装: cnpm install jsbarcode --save 引入:在要生成条形码的页面引入即可 import JsBarcode from 'jsbarcode' 3.二 ...
使用JsBarcode生成条形码
引入jquery和JsBarcode.all.js(注意:引入JsBarcode.js无效) github地址:https://github.com/lindell/JsBarcode 代码: < ...
使用js生成条形码以及二维码
一.用js生成条形码这种业务场景不是很常见的,最近刚好又接到这种需求 Google一下,发现github还真有这方面的轮子,感谢github,省去了我们很多造轮子的过程, 好了言归正传,首先引入jsb ...
vue生成条形码和二维码并打印
文章目录前言一.生成条形码二.生成二维码三.效果图四.打印前言最近有一个需求,需要将产品信息生成标签,每个信息生成一个条形码,拿到所有数据生成二维码,最后打印标签. 一.生成条形码使用 ...
angular如何生成条形码下载条形码
多条下载打包zip参考(26条消息) 如何生成下载条形码,下载多条打包(angular)_会写编程的恐龙的博客-CSDN博客 1.下载jsBarcode.js文件 https://github.com ...
js 生成条形码例子
下载生成条形码的js,我下载的是JsBarcode.all.min.js,地址为GitHub - lindell/JsBarcode: Barcode generation library writt ...

前端如何生成条形码---JsBarcode

React 生成条形码代码

HTML 生成条形码代码

JsBarcode参数All Options:

JsBarcode安装:

前端如何生成条形码---JsBarcode相关推荐

最新文章

热门文章