生成二維碼並下載

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);
        }      
}