美文网首页React.js学习
React 生成二维码/条形码

React 生成二维码/条形码

作者: 六毫笙 | 来源:发表于2018-01-23 19:59 被阅读13次

最 新:https://www.zybuluo.com/c-Ku/note/970696

一、生成二维码

只需引入 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;
    }
}

相关文章

网友评论

    本文标题:React 生成二维码/条形码

    本文链接:https://www.haomeiwen.com/subject/wzreaxtx.html