React 生成二维码/条码组件

/ 0评 / 1

目前在搞前端,选择是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 (
		
this._barcodeSVGSmall = ref}>
); }

二、二维码生成

一样先下载一个库

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 (
		this._qrcodeSVG = ref} transform="scale(2)">
		   
		
	);
}

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这样生成的二维码图形意外的小,还得找个库来放大一下二维码。

npm install svgpath
#或者
yarn add svgpath

尝试放大一下生成的二维码。

const scaledPath = svgpath(originPath).scale(5, 5).toString();
this.setState({path: scaledPath});

评论已关闭。