react 使用qrcode.react插件生成二维码并下载

1. 安装qrcode.react插件

yarn add qrcode.react
// or 
npm install qrcode.react --save

2. 使用qrcode.react插件生成二维码

• 引入

import QRCode from 'qrcode.react';

• 使用

3. 下载二维码

    点击下载

 changeCanvasToPic = () => {
    const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码
    const img = new Image();
    img.src = canvasImg.toDataURL('image/png'); // 将canvas对象转换为图片的data url
    const downLink = document.getElementById('down_link');
    downLink.href = img.src;
    downLink.download = '二维码'; // 图片name
  };

4. 定时刷新

项目中开发的是上课的签到二维码，增加了一个三秒刷新的功能，可能是为了避免一张图片签一学期的情况吧，，，，哈哈哈。。。。

定时刷新功能是使用 setInterval 定时更新 value 值来更新二维码，跳转地址后面拼上一个radomCode, radomCode定时更新，就实现二维码的刷新了，要及时清理定时器。

5.效果