vue2.0生成二維碼圖片並且下載圖片到本地兼容寫法

vue生成二維碼圖片，這里使用的是qrcode.js 這個插件（親測寫法，兼容沒有問題）

第一步，下載插件

需要注意，這里下載的是qrcodejs2

cnpm install --save qrcodejs2

第二步，在組件使用

<template>
  <div>
    <div @click="getQrcode"></div>//生成二維碼
    <div id="qrcode"></div> //創建一個div，並設置id為qrcode 
    <div @click="downs()"></div> //下載圖片
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'  // 引入qrcode
export default {
    name : 'test',
　　data(){

　　　　return{ 　　　　link: 'http://test.wx.jia-r.com/temporaryCarIndex.html' //需要生成二維碼圖片的字符串  　　}，
　　}
　　components:{QRCode },
 　 methods: {
       getQrocde(){
            document.getElementById('qrcode').innerHTML=''
             this.$nextTick (function () {//生成二維碼
                this.qrcode();
            })
        },
        qrcode () {
            let that = this;
            let qrcode = new QRCode('qrcode', {
                width: 200,
                height: 200,        // 高度
                text:  this.link,   // 二維碼內容
                // render: 'canvas' ,   // 設置渲染方式（有兩種方式 table和canvas，默認是canvas）
                // background: '#f0f',   // 背景色
                // foreground: '#ff0'    // 前景色
            })
        },
        downs(){
            // //找到canvas標簽
            let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
            let img=document.getElementById('qrcode').getElementsByTagName('img')
            // // //創建一個a標簽節點
            let a= document.createElement("a")
            // //設置a標簽的href屬性（將canvas變成png圖片）
            let imgURL=myCanvas[0].toDataURL('image/jpg');
            let ua = navigator.userAgent;
            if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) { // IE內核 並且  windows系統 情況下 才執行;
                var bstr = atob(imgURL.split(',')[1])
                var n = bstr.length
                var u8arr = new Uint8Array(n)
                while (n--) {
                  u8arr[n] = bstr.charCodeAt(n)
                }
                var blob = new Blob([u8arr])
                window.navigator.msSaveOrOpenBlob(blob, '下載' + '.' + 'png')
            }else if(ua.indexOf("Firefox") > -1){ //火狐兼容下載
                let blob = this.base64ToBlob(imgURL); //new Blob([content]);
                let evt = document.createEvent("HTMLEvents");
                evt.initEvent("click", true, true);//initEvent 不加后兩個參數在FF下會報錯  事件類型，是否冒泡，是否阻止瀏覽器的默認行為
                a.download = ' ';//下載圖片名稱，如果填內容識別不到，下載為未知文件，所以我這里就不填為空
                a.href = URL.createObjectURL(blob);
                a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
            }else{ //谷歌兼容下載
                img.src=myCanvas[0].toDataURL('image/jpg');
                // a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
                a.href=img.src
                //設置下載文件的名字
                a.download = "下載"
                 //點擊
                a.click()
            }
        },
        //base64轉blob
        base64ToBlob(code) {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
            let uInt8Array = new Uint8Array(rawLength);
            for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {type: contentType});
        }
  }
}
</script>  

 這里分享一個小技巧，通過qrcode生成的二維碼本身是沒有白邊的，這樣的二維碼並不好看↓

 

 如果想像這樣生成一個有白邊的二維碼，是不是更好看一點，只需要通過css樣式即可實現↓

代碼如下：

<style lang='less'>
 #qrcode { //圖片有白邊填充css
    display: inline-block;
    img {
      width: 132px;
      height: 132px;
      background-color: #fff; //設置白色背景色
      padding: 6px; // 利用padding的特性，擠出白邊
    }
  }
</style>

結束！！