美文网首页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