qrcode

• • • 1 安裝
    • 2 引入
    • 3 使用
    • • 3.1 方法1 ：QRCode.toCanvas()
      • 3.2 方法2 ：QRCode.toDataURL()
    • 4 完整示例

qrcode 是一個(gè)用于生成二維碼的 JavaScript 庫(kù)。主要是通過獲取 DOM 的標(biāo)簽,再通過 HTML5 Canvas 繪制而成

1 安裝

npm install --save qrcode

2 引入

import QRCode from 'qrcode';

如果您使用的 TypeScript，則在引入的時(shí)候可能會(huì)提示一下 error：

無法找到模塊“qrcode”的聲明文件。“C:/Users/shaoming/Desktop/swimxu/swim-react/node_modules/qrcode/lib/index.js”隱式擁有 “any” 類型。

嘗試使用 npm i --save-dev @types/qrcode (如果存在)，或者添加一個(gè)包含 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節(jié)點(diǎn) QRCode.toCanvas(canvas, '二維碼中存儲(chǔ)的數(shù)據(jù)內(nèi)容'); // 繪制二維碼

3.2 方法2 ：QRCode.toDataURL()

適合 react 使用。

<img src={imgUrl} /> const [imgUrl, setImgUrl] = useState('') ......QRCode.toDataURL('二維碼中存儲(chǔ)的數(shù)據(jù)內(nèi)容', (error: Error | null | undefined, url: string) => {setImgUrl(url); // 將獲取的url存到state中，方便img標(biāo)簽中使用 });

4 完整示例

React 使用 qrcode 實(shí)例：

import { useState } from 'react'; import { Button } from 'antd'; import QRCode from 'qrcode';const View = () => {const [imgUrl, setImgUrl] = useState('')const handleClick = async () => {const value = '二維碼中存儲(chǔ)的數(shù)據(jù)內(nèi)容'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' }}><Buttontype='primary'onClick={handleClick}style={{ width: 240, margin: '40px auto' }}>點(diǎn)擊生成二維碼</Button><canvas id='canvas' /><img src={imgUrl} /></div >) }export default View

總結(jié)

以上是生活随笔為你收集整理的使用 qrcode 生成二维码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。