React 生成二维码/条形码

ReactJS JavaScript cNotes

一、生成二维码

只需引入 qrcode.react 插件即可

import * as QrCode from 'qrcode.react'
render() {
    return (
        <QrCode value={value} size={120} />
    )
}

二、生成条形码

需引入 jsbarcode 插件

import * as Barcode from 'jsbarcode'
export class RefundSheet extends React.Component<any> {
  barcode
  componentDidMount() {
    Barcode(this.barcode, value, {
      displayValue: false,
      width: 1,
      height: 35,
      margin: 0,
    })
  }
  render() {
    return (
      <div className="barcode-box">
        <svg
          ref={ref => {
            this.barcode = ref
          }}
        />
      </div>
    )
  }
}

.barcode-box {
    width: 100%;
    position: relative;
    svg {
        position: absolute;
        right: 0px;
    }
}