vue-qrcode 下载二维码
时间: 2025-04-25 17:23:12 浏览: 24
### 使用 `vue-qrcode` 实现二维码下载
为了实现使用 `vue-qrcode` 库生成并下载二维码的功能,可以通过创建一个隐藏的 `<a>` 标签来触发文件下载。具体方法如下:
#### HTML 部分
```html
<template>
<div>
<!-- 显示二维码 -->
<vue-qrcode :value="qrcodeValue" :options="{ size: 200 }"></vue-qrcode>
<!-- 下载按钮 -->
<button @click="downloadQRCode">下载二维码</button>
<!-- 创建用于下载的链接 -->
<a id="download-link" style="display:none;"></a>
</div>
</template>
```
#### JavaScript 方法部分
```javascript
<script setup>
import { ref, onMounted } from 'vue'
import VueQrcode from '@chenfengyuan/vue-qrcode'
// 定义二维码内容和其他配置项
const qrcodeValue = ref('https://example.com')
function downloadQRCode() {
const canvas = document.querySelector('canvas')
const link = document.getElementById('download-link')
// 将Canvas转换成Blob对象以便于下载
canvas.toBlob(blob => {
let url = URL.createObjectURL(blob)
link.href = url
link.download = 'qrcode.png' // 设置下载后的文件名
link.click()
URL.revokeObjectURL(url) // 清理内存
})
}
onMounted(() => {
// 初始化操作...
})
</script>
```
此方案利用了浏览器原生支持的 Canvas API 来捕获渲染好的二维码图像,并将其转化为 Blob 对象供下载链接使用。
上述代码片段展示了如何在点击按钮时调用 `downloadQRCode()` 函数完成二维码图片的保存过程[^1]。
阅读全文
相关推荐

















