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

本文介绍了一种使用file-saver和vue-qr在包括IE在内的多种浏览器中生成并下载二维码的方法。通过在index.html中引入file-saver.js，并使用npm安装vue-qr组件，实现了二维码的动态生成及跨浏览器兼容的下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.2/FileSaver.js"></script>

要生成二维码可以使用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)