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-canvas
  QRCode.toCanvas(canvas, url, {
      
      width:120,height:120})
  var dataURL = canvas.toDataURL("image/png")
  
  const a = document.getElementById("saveLink")
  a.href = dataURL
  a.download = `二维码.png` // 报文到本地时的文件名称
}
</script>

3. 演示