生成二维码并下载

npm install vue-qriously -S

//入口js文件 main.js

import Vue from 'vue';
import VueQriously from 'vue-qriously';
Vue.use(VueQriously);

　　

<template>
    <qriously id='mycanvas' :value="value" :size="size" :backgroundAlpha="backgroundAlpha"/> 
</template> 
<script>
 export default {
   data(){
     return { 
       // 可以自定义，必填项。 
       value: 'http://lxchuan12.github.io/', 
       // 二维码大小 默认 100 
       size: 80, // 背景透明度，默认透明 0 
       backgroundAlpha： 1, 
    } 
  } 
} 
</script>

　　

下载二维码

methods{
     downqriousl(){
            var can = document.getElementById("mycanvas");
            var canvas = can.querySelector('canvas')
            var type ='png';//你想要什么图片格式 就选什么吧
            var imgdata=canvas.toDataURL(type);
            //2.0 将mime-type改为image/octet-stream,强制让浏览器下载
            var fixtype=function(type){
                type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
                var r=type.match(/png|jpeg|bmp|gif/)[0];
                return 'image/'+r;
            };
            imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
            //3.0 将图片保存到本地
            var savaFile=function(data,filename)
            {
                var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href=data;
                save_link.download=filename;
                var event=document.createEvent('MouseEvents');
                event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
                save_link.dispatchEvent(event);
            };
            var filename=''+new Date().getSeconds()+'.'+type;
            //我想用当前秒是可以解决重名的问题了 不行你就换成毫秒
            savaFile(imgdata,filename);
        }      
}