qrcode生成二维码并本地下载

• 1、npm 安装qrCode

npm install qrcode --save

• 2、代码中引入并使用

// xxxx.vue
<template>
	<canvas id="canvas"></canvas><br>
	<span style="color:#1AB394" @click="handleDownloadCode">立即下载</span>
</template>

<script>
import QRCode from 'qrcode';
export default{
	data(){
		return{
			codeUrl:'xxxxxxxxxx',	// code url
		}
	},
	methods:{
	// 初始化code
		initCode(){
            let canvas = document.getElementById('canvas')
            QRCode.toCanvas(canvas, this.codeUrl, {
                width: 130,
                height: 130,
                margin: 1
            }, function(error) {
                if (error) console.log(error);
                console.log('success');
            })
        },
        // 按钮下载二维码到本地
		handleDownloadCode(){
            /**
            let canvas = document.getElementById('canvas')
            QRCode.toCanvas(canvas,this.codeUrl,{width:130,height:130,margin:1},function(error){
                if(error)console.log(error);
                console.log('success');
            })
			**/
            let base64Img = canvas.toDataURL()
            let link = document.createElement('a')
            link.href = base64Img
            link.download = 'code'+ Date.now()
            let event = document.createEvent('MouseEvents')
            event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null)
            link.dispatchEvent(event)
        }
	}
}
</script>