生成二维码并下载二维码（兼容IE等浏览器）

川长思鸟来 2023-02-17 03:57 15阅读 0赞

**由于项目需求要点击按钮后，生成二维码并把二维码下载到本地，于是找了大量资料都没能实现兼容IE浏览器的方法，最后终于发现`file-saver`能完美解决这个问题**

**首先在`index.html`文件中引入`file-saver`的js文件，（也可以使用`npm`安装依赖，至于如何安装使用可百度，这里不做介绍）**

**要生成二维码可以使用`vue-qr`**

npm install vue-qr -S

**在需要生成二维码的文件里面引入**

import VueQr from 'vue-qr'

**并注册为组件**

components:{ 
        VueQr // 二维码组件
    },

**在html文件里加入以下代码**

<vue-qr
        ref="Qrcode"
        style="display:none"
        :logo-src="二维码中心logo图片"
        :text="二维码内容"
        :size="200"
        :margin="0"
    />

**最后在点击二维码的时候进行以下操作**

// 下载二维码
    downQRImg (data, type) { 
    	// 进行二维码类容配置
        this.config = { 
            logo: '',
            value: type === 'deliver' ? data.SendCodeUrl : data.QrCodePickUpUrl
        }
        let that = this
        window.timer = setInterval(() => { 
            let iconUrl = that.$refs.Qrcode.$el.src
            const regex = new RegExp('^data:([^/]+/([^;]+));base64')
            if (iconUrl) { 
                let b64Data = iconUrl.replace(regex, '$1,$2').split(',')
                let contentType = b64Data[0]
                // 解码
                let raw = window.atob(b64Data[2])
                let rawLength = raw.length
                let fileName = `${ data.TenantName}.${ b64Data[1]}`
                let uInt8Array = new Uint8Array(rawLength)
                for (let i = 0; i < rawLength; ++i) { 
                    uInt8Array[i] = raw.charCodeAt(i)
                }
                let blob = new Blob([uInt8Array], { type: contentType})
                saveAs(blob, fileName)
                clearInterval(window.timer)
                that.$message.success('二维码已下载')
                that.config = { 
                    logo: '',
                    value: ''
                }
            }
        }, 100)
    },

## 搞定，以上这些便能在谷歌，IE等浏览器中进行生成二维码并下载二维码 ##

**提示：以下这方法在IE浏览器下并不能下载二维码**

// let timer = setInterval(() => { 
    //     if (this.$refs.Qrcode.$el.src) { 
    //         const iconUrl = this.$refs.Qrcode.$el.src
    //         console.log('二维码地址', iconUrl)
    //         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('二维码已下载')
    //         this.config = { 
    //             logo: '',
    //             value: ''
    //         }
    //     }
    // }, 100)