React 生成二维码_react生成二维码图片-程序员宅基地

技术标签： react.js react native qrcode.react javascript 二维码

使用qrcode.react

安装依赖库

npm install qrcode.react

//
yarn add qrcode.react

代码实现

import React, { Component } from 'react';
import { Modal} from 'antd';

const QRCode = require('qrcode.react');

class QRCodeModal extends Component {

    constructor(props) {
        super(props)
        this.state = {
            qrCodeStr: '20220119QRCODE'
        }
    }

    downloadQrCode = () => {
        const canvasImg = document.getElementById('qrCode'); 
        const img = new Image();
        img.src = canvasImg.toDataURL('image/png'); 
        const downLink = document.getElementById('down_link');
        downLink.href = img.src;
        downLink.download = this.state.qrCodeStr;
    }

    render() {
        return (
            <Modal
                title={i18n.t('charger.qrcode')}
                width={500}
                visible={this.props.qrCodeVisible}
                onOk={this.handleCancel}
                onCancel={this.handleCancel}
                footer={[]}>
                <div className='bm bm-f1 bm-pc bm-ac bm-ver' style={
   {marginTop: 30}}>
                    <QRCode value={this.state.qrCodeStr} size={256} id="qrCode" />
                    <a id="down_qacode" 
                       onClick={this.downloadQrCode} 
                       style={
   {
                            fontSize: 16, 
                            marginTop: 20, 
                            width: 256, 
                            textAlign: 'center', 
                            paddingTop: 10, 
                            paddingBottom: 10, 
                            border: '1px solid'}}>
                        下载二维码
                    </a>
                </div>
            </Modal>
    )}

}

export default QRCodeModal

效果如下：

点击下载：

本文链接：https://blog.csdn.net/u012885136/article/details/122575542

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

基于ArUco的视觉定位（一）_多个aruco定位-程序员宅基地

文章浏览阅读6.3k次，点赞7次，收藏68次。1、ArUco简介ArUco: a minimal library for Augmented Reality applications based on OpenCV，是科尔多瓦大学“人工视觉应用”研究小组（A.V.A）设计开发的一个微型现实增强库。ArUco源码下载地址：https://sourceforge.net/projects/aruco/files/?source=navba..._多个aruco定位

Android - 实现微信的底部导航功能（第五次作业）_android仿微信底部导航栏-程序员宅基地

文章浏览阅读447次。利用fragment和ViewPager实现类似微信的底部导航功能。上传模拟器运行截图及代码截图。_android仿微信底部导航栏

20届信息安全毕业设计(论文)选题推荐-程序员宅基地

文章浏览阅读1.3k次，点赞37次，收藏16次。信息安全毕业设计选题合集涵盖了管理系统、小程序、深度学习、机器学习、算法、人工智能、大数据、网络安全、嵌入式、推荐系统、目标检测等多个热门领域。对于计算机专业、软件工程专业、人工智能专业、通信工程专业的毕业生而言，选择一个合适的毕业设计选题至关重要。在这个毕业设计选题合集中，我们精心收集了各种有趣且具有挑战性的选题，旨在帮助学生们在毕业设计中展现他们的技术实力和创新能力。不论是对于对深度学习技术感兴趣的同学，还是希望探索机器学习、算法或人工智能的领域的同学，本合集都能为您提供丰富的选题资源和灵感。

Linux编程基础：第2章命令与开发工具课后习题_linux黑马课后作业答案第二章-程序员宅基地

文章浏览阅读1.8w次，点赞13次，收藏99次。《Linux编程基础》黑马程序员/编著清华大学出版社一、填空题1、Linux是一个基于命令行的操作系统，Linux命令中的选项分为（长选项）和（短选项）。2、Linux操作系统秉持“一切皆文件”的思想，将其中的文件、设备等通通当做文件来操作和处理，因此，文件处理与管理命令是Linux系统中最基础的命令。常用的文件处理与管理命令有：（ls cd pwd touch mkdir cp mv rm rmdir（注：写出5个即可））等。3、Vi编辑器有三种工作模式，分别是：（命令模......_linux黑马课后作业答案第二章

WEB前端网页设计-Bootstrap 输入框组_bootstrap加减输入框按钮组件-程序员宅基地

文章浏览阅读1.8k次，点赞2次，收藏6次。输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。_bootstrap加减输入框按钮组件

【TWVRP】改进的模拟退火算法求解带时间窗车辆路径规划问题【含Matlab源码 3274期】-程序员宅基地

文章浏览阅读30次。改进的模拟退火算法求解带时间窗车辆路径规划问题完整的代码，方可运行；可提供运行操作视频！适合小白！

随便推点

Java PhantomJS+ECharts Windows 生成图片_phantomjs eharts window cdns-程序员宅基地

文章浏览阅读777次，点赞2次，收藏3次。Java PhantomJS+ECharts Windows 生成图片菜鸡程序员小童准备用Java生成图片啦，主要是为了生成图表哦简单的效果图开始准备下手吧~下载安装PhantomJS下载选择Windows版本，我选择的是2.1.1版本https://phantomjs.org/download.html部署环境PHANTOM_JS_HOME=D:\phantomjs\pha..._phantomjs eharts window cdns

零基础入门生信数据分析——导读-程序员宅基地

文章浏览阅读701次，点赞21次，收藏9次。专栏的目录，可以直接通过各个分析点跳转到相关帖子，方便查找

找出字符串 “abcabcabcabcabcabda“ 中 “ab“ 出现的次数和位置_编写一个函数,找出字符串 “abcabcabcabcabcabda” 中 “ab” 出现的次数和位置-程序员宅基地

文章浏览阅读967次。找出字符串 "abcabcabcabcabcabda" 中 "ab" 出现的次数和位置_编写一个函数,找出字符串 “abcabcabcabcabcabda” 中 “ab” 出现的次数和位置。

第04天-文件IO_#include <stdio.h>#include <string.h>#include <sys-程序员宅基地

文章浏览阅读239次。第04天-文件IO系统调用是受控的内核入口，借助于这一机制，进程可以请求内核以自己的名义去执行某些动作**实现：**系统调用是操作系统内核的一部分的，必须以某种方式提供给进程让他们去调用。CPU可以在不同的特权级别下运行，而相应的操作系统也有的运行级别（用户态和内核态）运行在内核态的进程可以毫无限制的访问各种资源，操作系统通过软件中断从用户态切换到内核态库函数：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-18xZd0AJ-1656067116776)(D:\图片\imag_#include #include #include #incl

确定LR(1)项目的搜索符_lr(1)搜索符怎么看-程序员宅基地

文章浏览阅读1.9k次，点赞3次，收藏6次。确定LR(1)项目的搜索符典例提示要求哪个的搜索符，就找这个是从哪儿来的，规约后原来的后面跟的就是搜索符_lr(1)搜索符怎么看

ubuntu安装教程及ubuntu镜像下载（超详细图文教程）_vmware安装ubuntu-程序员宅基地

文章浏览阅读10w+次，点赞152次，收藏529次。VMware虚拟机安装Ubuntu（超详细图文教程）_vmware安装ubuntu