https://github.com/zpao/qrcode.react

  1. npm install qrcode.react

组件的 props参数

prop type default value
value string
renderAs string (‘canvas’ ‘svg’) ‘canvas’
size number 128
bgColor string (CSS color) “#FFFFFF”
fgColor string (CSS color) “#000000”
level string (‘L’ ‘M’ ‘Q’ ‘H’) ‘L’
includeMargin boolean false
imageSettings object (see below)

二维码中间的图片参数

field type default value
src string
x number none, will center
y number none, will center
height number 10% of size
width number 10% of size
excavate boolean false

二维码参数配置

https://zpao.github.io/qrcode.react/

  1. <QRCode
  2.   value={"https://www.yuque.com/lulongwen/"}
  3.   size={128}
  4.   bgColor={"#ffffff"}
  5.   fgColor={"#289af0"}
  6.   level={"L"}
  7.   includeMargin={true}
  8.   renderAs={"svg"}
  9.   imageSettings={{
  10.     src: "https://gw.alipayobjects.com/zos/basement_prod/02f2a451-b7d9-49cd-a3bd-ddfe309e68d6.svg",
  11.     x: null,
  12.     y: null,
  13.     height: 24,
  14.     width: 24,
  15.     excavate: true,
  16.   }}
  17. />

https://zhuanlan.zhihu.com/p/265086442

Qrcode 超出报错

Qrcode 字符串 URL 有长度限制，超出报错

  • 纯中文最多 425个字符
  • 纯英文 1276个字符

https://blog.csdn.net/wuyujin1997/article/details/112162572