前端实现二维码图片下载-react

最新推荐文章于 2023-10-16 22:15:00 发布

QiBarbara

最新推荐文章于 2023-10-16 22:15:00 发布

阅读量503

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_41606276/article/details/114531604

版权

前端专栏收录该内容

63 篇文章

订阅专栏

这篇博客介绍了如何利用npm包qrcode.react在React应用中生成二维码，并提供了一个下载二维码图片的方法。通过设置value、size、fgColor等属性自定义二维码，然后点击按钮触发下载操作，实现静态二维码的动态生成与保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用npm插件qrcode.react

npm install --save qrcode.react

引入 import QRCode from 'qrcode.react';

<QRCode
     style={{display: 'none'}}
     value="https://blog.youkuaiyun.com/weixin_41606276/article/details/114531604" //value为二维码中包含的内容
     size={200} //二维码的宽高尺寸
     fgColor="#000000" //二维码的颜色
     id = {`code${index}`}
/>

<div 
    className={styles.preCopy} 
    onClick={() => downloadPic(index, name)}>
          下载二维码
</div>

下载方法

//下载二维码
    const downloadPic = (index: number, name: string) => {
        const downloadCardId = `code${index}`;
        let canvas = document.getElementById(downloadCardId);
        canvas = canvas.toDataURL("image/png");
        var oA = document.createElement("a");
        oA.download = `${name}二维码`;// 设置下载的文件名，默认是'下载'
        oA.href = canvas;
        document.body.appendChild(oA);
        oA.click();
        oA.remove(); // 下载之后把创建的元素删除
    }