通过url生成二维码

一、前端准备

EtObjectCode二维码生成类

openModal(,{

                    title:'查看链接',

                    width:'40%',

                    }

                )

二EtObjectCode类

import React, { Component } from 'react'
import QRCode from 'qrcodejs2'
import * as rest from '../../../src/lib/rest'
import { Notify } from '../../../src/components';
export default class EtObjectCode extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url: ''
    }
  }
  componentDidMount() {
    const {record} = this.props;
    
    rest.post('/service/EqbContractSign/elaSubjectUrl', {{参数}}).then(res=>{
      this.setState({
        url:res.data
      },()=>{
        let qrcode = new QRCode("my-qr-code", {
          text: res.data,
          width: 147,
          height: 147,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
      })
      })
    })

  }
  //复制文本
  copyText = (url) => {
    var element = this.createElement(url);
    element.select();
    element.setSelectionRange(0, element.value.length);
    document.execCommand('copy');
    element.remove();
    Notify.success('已复制到剪切板')
  }

  //创建临时的输入框元素
  createElement = (text) => {
    var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
    var element = document.createElement('textarea');
    // 防止在ios中产生缩放效果
    element.style.fontSize = '12pt';
    // 重置盒模型
    element.style.border = '0';
    element.style.padding = '0';
    element.style.margin = '0';
    // 将元素移到屏幕外
    element.style.position = 'absolute';
    element.style[isRTL ? 'right' : 'left'] = '-9999px';
    // 移动元素到页面底部
    let yPosition = window.pageYOffset || document.documentElement.scrollTop;
    element.style.top = `${yPosition}px`;
    //设置元素只读
    element.setAttribute('readonly', '');
    element.value = text;
    document.body.appendChild(element);
    return element;
  }
  render() {
    const { url } = this.state
    if(!url){
      return null
    }
    return (
      

        

          

          this.copyText(url)} title='点击复制'>复制签署链接
        
      
    )
  }
}

三、效果