安装

npm install jsbarcode --save

使用

只做简单记录，详细使用方法查看README.md文档

方法1：这种方法适合直接操作DOM

// 条码
const canvas = document.createElement('canvas');
Barcode(canvas, value, {format: 'CODE128', // 条形码类型displayValue: false, // 否在条形码下方显示文字
});
Handsontable.dom.empty(TD);
TD.appendChild(canvas);

方法2：这种方法适合react使用

首先写一个react类组件cs-barcode.tsx

import React from 'react';
import JsBarcode from 'jsbarcode';interface CSBarcodeProps {value: string; // 要编入的文本renderer: string; // 渲染类型：svg|canvas|imgoptions: JsBarcode.Options; // 配置
}interface CSBarcodeState {}class CSBarcode extends React.Component<CSBarcodeProps, CSBarcodeState> {constructor(props: CSBarcodeProps) {super(props);this.update = this.update.bind(this);}componentDidMount() {this.update();}componentDidUpdate() {this.update();}barcode: any;handleBarcode = (r: any) => {this.barcode = r;};update() {const { options, value } = this.props;JsBarcode(this.barcode, value, { ...options });}render() {const { renderer } = this.props;if (renderer === 'svg') {return <svg ref={this.handleBarcode} />;} else if (renderer === 'canvas') {return <canvas ref={this.handleBarcode} />;} else if (renderer === 'img') {return <img ref={this.handleBarcode} alt="" />;}}
}export default CSBarcode;

然后根据需要直接使用：

<CSBarcodevalue={value}options={{format: 'CODE128', // 条形码类型displayValue: false, // 否在条形码下方显示文字}}renderer="svg"
/>

jsbarcode生成条码相关推荐

JAVA生成条码（jbarcode）
条码技术在现在的应用非常广泛,几乎所有的商品包装上都会印有条形码,这一篇将通过实例演示JAVA如何生成条码,需要使用的第三方包为:jbarcode import java.awt.image.Buff ...
ZPL 打印条码、二维码及小票（中文/汉字），生成条码、二维码图片【Asp.Net】-含示例代码
生成条码(图1).二维码(图2)图片及打印出二维码标签(图3)效果图1 图2 ...
excel 批量生成条码
2019独角兽企业重金招聘Python工程师标准>>> 参考网站: https://jingyan.baidu.com/article/597a06434f1b12312b52430 ...
用条码标签打印软件生成条码的校验码
一维码的类型有很多种,有些类型最后一个字符是校验码,根据前面的数据计算得出,作用是条码的正确性校验,如EAN-13\8.UPC-A\E等类型. 条码,英文名称barcode,又称条形码,常用种类分为一 ...
excel数据生成条码或者二维码并放在表格中（VBA）
最近做的项目要将一列数据生成条码和二维码,并打印这是一个简单的表格操作嵌入式脚本目的是生成二维码或条码直接上代码 Sub 批量生成二维码()Dim k As Long, i As Long, j ...
js 生成条码和打印
需求条形码上边显示汉字,下边显示码值,如下图. 研究条形码规范对条形码是否能显示汉字,不确定,只能研究规范了. 研究得知,条形码也就是一维码,有很多规范,所有的规范都不支持汉字,所以在条形码上边 ...
php动态执行生成条码,PHP生成条形码之二开源之道
该软件支持PHP4和PHP5两个版本,本文中使用的是PHP5的版本.在使用前注意要将PHP的GD模块开启.在Windows中为php_gd2.dll,Linux中为gd.so.将压缩文件解压到Apac ...
工具说明书 - 使用网页生成条码
使用如下网页链接,用来生成一维或二维条码: Free Online Barcode Generator: Create Barcodes for Free! 使用这个可以输入特殊条码,比如Functi ...
使用JsBarcode生成条形码
引入jquery和JsBarcode.all.js(注意:引入JsBarcode.js无效) github地址:https://github.com/lindell/JsBarcode 代码: < ...
(其他)在线生成条码的网址
1.下面是免费在线条码生成器. http://www.qinms.com/webapp/barcode/index.aspx 2.免费条码生成工具: http://barcode.cnaidc.com ...

jsbarcode生成条码

安装

使用

jsbarcode生成条码相关推荐

最新文章

热门文章