vue 使用qrcode生成二维码并可下载保存

1. 安装qrcode

npm install qrcode --save

2. 代码

<template><div style="display: flex; flex-direction: column; align-items: center; justify-content center;"><div>查看溯源码，<a id="saveLink" style="text-decoration:underline">点击保存</a></div><canvas id="qrcode-canvas"></canvas></div>
</template>
<script>
import QRCode from 'qrcode'
export default {return data(){url: "", //待生成二维码的data},mounted(){generateQRCode(this.url)}
}generateQRCode(url) {const canvas = document.getElementById('qrcode-canvas') // 在模板中的canvas元素设置id为 qrcode-canvasQRCode.toCanvas(canvas, url, {width:120,height:120})var dataURL = canvas.toDataURL("image/png")const a = document.getElementById("saveLink")a.href = dataURLa.download = `二维码.png` // 报文到本地时的文件名称
}
</script>

3. 演示