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

1. 安装qrcode

npm install qrcode --save
1

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3. 演示