二维码下载

先安装qriously

npm install vue-qriously

直接上代码啦啦啦

 <div class="box">
     <qriously id='mycanvas' :value="this.value" :size="this.size" />
     <el-button size="mini" type="primary" @click="handleDownloadQr2">
         下载
     </el-button>
</div>

data（）{
	 value:'www.baidu.com',
     size:200,
}

 handleDownloadQr2(){
                let canvas = document.querySelector('#mycanvas canvas');
                 let imgSrc = canvas.toDataURL();
                let elem = document.createElement('a');
                elem.setAttribute('href', imgSrc);
                elem.setAttribute('download', '二维码.png');
                document.body.appendChild(elem);
                elem.click();
                document.body.removeChild(elem);
            },

重点： let canvas = document.querySelector(’#mycanvas canvas’);不能用let canvas = document.getElementById(“mycanvas”);代替，不然会报错
在这里插入图片描述
主要原因是document.getElementById(“mycanvas”)获得的元素不单单是canvas元素，还包括canvas外的div模块