使用 qrcode 生成二维码

最新推荐文章于 2025-06-19 10:23:58 发布

网页装修工

最新推荐文章于 2025-06-19 10:23:58 发布

阅读量7.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：开发攻城狮 JavaScript 文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/qq_53931766/article/details/128078301

JavaScript 同时被 2 个专栏收录

25 篇文章

订阅专栏

开发攻城狮

18 篇文章

订阅专栏

本文介绍了如何使用JavaScript库qrcode在Web应用中生成二维码。首先通过npm安装qrcode库，然后根据需要引入库。如果使用TypeScript，还需要安装@types/qrcode以解决类型定义问题。接着展示了两种生成二维码的方法：1) 使用QRCode.toCanvas()将二维码绘制到canvas元素，适合本地下载；2) 使用QRCode.toDataURL()生成二维码的dataURL，适用于React等框架，将其赋值给img标签的src属性。最后提供了一个React组件的完整示例，展示了如何点击按钮动态生成二维码。

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

qrcode

qrcode 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成

1 安装

npm install --save qrcode

2 引入

import QRCode from 'qrcode';

如果您使用的 TypeScript，则在引入的时候可能会提示一下 error：

在这里插入图片描述

无法找到模块“qrcode”的声明文件。“C:/Users/shaoming/Desktop/swimxu/swim-react/node_modules/qrcode/lib/index.js”隐式拥有 “any” 类型。

尝试使用 npm i --save-dev @types/qrcode (如果存在)，或者添加一个包含 declare module 'qrcode'; 的新声明(.d.ts)文件ts(7016)

则需要安装 @types/qrcode，即可解决。

npm install --save @types/qrcode

3 使用

3.1 方法1 ：QRCode.toCanvas()

直接操作DOM，适合用于将二维码直接下载到本地。

<canvas id='canvas' />

const canvas = document.getElementById('canvas'); // 获取canvas节点
QRCode.toCanvas(canvas, '二维码中存储的数据内容'); // 绘制二维码

3.2 方法2 ：QRCode.toDataURL()

适合 react 使用。

<img src={imgUrl} />

const [imgUrl, setImgUrl] = useState('')
......

QRCode.toDataURL('二维码中存储的数据内容', (error: Error | null | undefined, url: string) => {
	setImgUrl(url); // 将获取的url存到state中，方便img标签中使用
});

4 完整示例

React 使用 qrcode 实例：

import { useState } from 'react';
import { Button } from 'antd';
import QRCode from 'qrcode';

const View = () => {
  const [imgUrl, setImgUrl] = useState('')

  const handleClick = async () => {
    const value = '二维码中存储的数据内容'

	const canvas = document.getElementById('canvas');
    QRCode.toCanvas(canvas, value);
      
    QRCode.toDataURL(value, (error: Error | null | undefined, url: string) => {
      setImgUrl(url);
    });
  }

  return (
    <div style={{ width: 240, margin: '100px auto', textAlign: 'center' }}>
      <Button
        type='primary'
        onClick={handleClick}
        style={{ width: 240, margin: '40px auto' }}
      >
        点击生成二维码
      </Button>
      <canvas id='canvas' />
      <img src={imgUrl} />
    </div >
  )
}

export default View