目前在搞前端,选择是ant-design-pro,采用的是React,这里使用到了条形码/二维码的生成,简单介绍一下
一、条形码生成
首先需要下载一个库
npm install jsbarcode
#或者
yarn add jsbarcode
然后就可以直接使用了
import JsBarcode from 'jsbarcode';
_barcodeSVGSmall //要声明接收变量
handleBarcode = (message)=> {
//可以去git上查看文档,很简单
JsBarcode(this._barcodeSVGSmall, message, {
displayValue: true, // 显示原始值
height:30,
});
}
//在render中使用svg接收
render(){
return (
);
}
二、二维码生成
一样先下载一个库
npm install qr-image
#或者
yarn add qr-image
直接使用,由于这个库主要是用在 nodejs 中,我们使用其中提供的 svgObject.path 来绘制二维码。
import svgpath from 'svgpath';
import qr from 'qr-image';
_qrcodeSVG
handleBarcode = (message)=> {
const originPath = qr.svgObject(message).path; // 获得二维码的绘制路径
this.setState({
path: originPath
});
}
//在render中使用svg接收
render(){
return (
);
}
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
这样生成的二维码图形意外的小,还得找个库来放大一下二维码。
npm install svgpath
#或者
yarn add svgpath
尝试放大一下生成的二维码。
const scaledPath = svgpath(originPath).scale(5, 5).toString();
this.setState({path: scaledPath});