前端生成二維碼有很多方法，常見的做法是使用 JavaScript 庫 來生成二維碼。下面整理幾種常用方案，并附示例代碼。

---

1?? 使用 qrcode 庫（推薦）

qrcode 是一個非常流行的前端 JS 庫，可以生成 Canvas 或者 SVG 的二維碼。

安裝（如果是 npm 項目）：

npm install qrcode

示例（生成 Canvas）：

<div id="qrcode"></div>
<script type="module">
import QRCode from 'qrcode'const qrText = 'https://www.example.com'
const canvas = document.createElement('canvas')
document.getElementById('qrcode').appendChild(canvas)QRCode.toCanvas(canvas, qrText, { width: 200 }, function (error) {if (error) console.error(error)else console.log('二維碼生成成功')
})
</script>

生成圖片（Base64）：

QRCode.toDataURL('https://www.example.com', { width: 200 }).then(url => {const img = document.createElement('img')img.src = urldocument.body.appendChild(img)}).catch(err => console.error(err))

---

2?? 使用 qrious 庫

qrious 是另一個前端生成二維碼的輕量庫，支持 Canvas。

安裝：

npm install qrious

示例：

<canvas id="qriousCanvas"></canvas>
<script type="module">
import QRious from 'qrious'const qr = new QRious({element: document.getElementById('qriousCanvas'),value: 'https://www.example.com',size: 200
})
</script>

---

3?? 使用 react-qr-code（React 項目）

如果你用的是 React，可以用這個庫直接生成二維碼組件：

npm install react-qr-code

import QRCode from "react-qr-code";export default function App() {return <QRCode value="https://www.example.com" size={200} />;
}

---

4?? 使用 CDN（無需安裝）

如果只是簡單頁面，可以直接用 CDN：

<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
<div id="qrcode"></div>
<script>
QRCode.toCanvas(document.getElementById('qrcode'), 'https://www.example.com', { width: 200 })
</script>

---

💡 小貼士：

• width 控制二維碼大小。

• 可以生成 Canvas、SVG 或 Base64 圖片。

• 對于帶 logo 的二維碼，可以先生成二維碼，再使用 Canvas 繪制 logo。

---