vue生產二維碼並下載二維碼

首先安裝一下面這個插件

 cnpm install vue-qr -S

接下來在需要生產並下載二維碼的頁面引入

import VueQr from 'vue-qr'

並在components中註冊爲組件

components: {
    VueQr // 二維碼組件
},
data() {
	return {
	        config: { // 二維碼配置
                logo: '',
                value: ''
            }
	}
},
methods: {
	// 點擊觸發下載二維碼
	downQRImg (data, type) {
	    this.config = {
	        logo: '二維碼中心logo',
	        value: '二維碼內容'
	    }
	    let timer = setInterval(() => {	// 做一個定時器防止二維碼未生成時候就下載而獲取不到二維碼地址
	        if (this.$refs.Qrcode.$el.src) {
	            const iconUrl = this.$refs.Qrcode.$el.src	// 二維碼地址
	            let a = document.createElement('a')
	            let event = new MouseEvent('click')
	            a.download = data.TenantName	// 二維碼名稱
	            a.href = iconUrl
	            a.dispatchEvent(event)
	            clearInterval(timer)
	            this.$message.success('二維碼已下載')