qrcode

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

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' }}><Buttontype='primary'onClick={handleClick}style={{ width: 240, margin: '40px auto' }}>點擊生成二維碼</Button><canvas id='canvas' /><img src={imgUrl} /></div >) }export default View

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。