vue 生成二维码并点击按钮下载功能

安装qrcode依赖

npm install qecode

页面部分

<canvas id="qrcode" ref="qrcode" width="200"  height="200"></canvas>
<a href="javascript:;" @click="downloadCode"> 下载二维码</a href="javascript:;">
<script>
import qrcode from "qrcode"; //引入qrcode
export default {
	methods:{
		// 下载二维码
    	downloadCode(){
      		let link= ""//生成二维码的内容  自个填
      		this.generateQRCode(link)
    	},
    	// 生成二维码的方法
    	generateQRCode(content) {
      		this.$nextTick(() => {
       			const canvas = this.$refs.qrcode;
        		canvas.width = 200;
        		canvas.height = 200;
        		canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
        		qrcode.toCanvas(
         		canvas,
          		content,
          		{
            		width: 200,
          		},
          		(error) => {
              	    this.savePic()
          		},
        		);
      	    });
       },
       //保存canvas 生成的二维码图片
    	savePic() {
      	 var canvasData =document.getElementById('qrcode');
         var a = document.createElement("a");
         a.href = canvasData.toDataURL();;
         a.download = "drcQrcode";
         a.click();
        },
	}
}
</script>