使用 qrcode.react 繪制二維碼，並下載二維碼

 如果是要生成svg格式的二維碼，可以使用以下方法進行下載

/**

 * 將svg導出成圖片

 * @param node svg節點 => document.querySelector('svg')

 * @param name 生成的圖片名稱

 * @param width 生成的圖片寬度

 * @param height 生成的圖片高度

 * @param type 生成的圖片類型

 */

export const covertSVG2Image = (node, name, width, height, type = 'png') => {

      let serializer = new XMLSerializer()

      let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node)

      let image = new Image()

 　　 image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)

 　　 let canvas = document.createElement('canvas')

  　　canvas.width = width

 　　 canvas.height = height

 　　 let context = canvas.getContext('2d')

 　　 context.fillStyle = '#fff'

  　　context.fillRect(0, 0, 10000, 10000)

  　　image.onload = function () {

   　　 context.drawImage(image, 0, 0)

    　　let a = document.createElement('a')

    　　a.download = `${name}.${type}`

   　　 a.href = canvas.toDataURL(`image/${type}`)

   　　 a.click()

  　　}

}

 

　  import QRCode from 'qrcode.react';

    const [qrcode, setQrcode] = useState('' )

　//導出canvas繪制的二維碼，導出格式為png const handleClickDownLoad = () => { let canvas = $('#qrCodeBox canvas')[0]; setQrcode(canvas.toDataURL('image/png')); };

 

  <div className="qr-code" id="qrCodeBox">
  　　<QRCode
        renderAs="svg"//渲染格式為svg,默認為canvas
        value={"http://www.baidu.com"}//需要渲染為二維碼的鏈接地址
        size={180}//渲染出來的二維碼大小
     />
     <div onClick={() => covertSVG2Image($('#qrCodeBox svg')[0], '111', 180, 180)}>
        點擊下載svg繪制的二維碼
     </div>
     <a onClick={handleClickDownLoad} download='二維碼' href={qrcode}>
        點擊下載canvas繪制的二維碼
     </a>
  </div>

 

 

 

 參考地址：https://www.jianshu.com/p/92d5a778d964