生成二维码

引入依赖

import VueQr from 'vue-qr' // 生成二维码
import FileSaver from 'file-saver' // 下载二维码

template

// ...

<template v-if="isShowQRcode">
    <vue-qr :title="QRCodeUrl" :text="QRCodeUrl" :size="125" :margin="5" :callback="QRcodeSuccess"></vue-qr>
    <el-button class="qrcode-download" size="mini" type="primary" @click="QRcodeDownload">
        下载
    </el-button>
</template>

// ...

script

// ...

components: {
    VueQr,
},

// ...

data() {
    return {
        isShowQRcode: false,
        QRCodeUrl: 'https://www.baidu.com/',
        QRcodeData: '',
    }
},

// ...

methods: {
    // 二维码生成回调base64
    QRcodeSuccess(data) {
        this.QRcodeData = data
    },
    // 下载
    QRcodeDownload() {
        FileSaver.saveAs(this.QRcodeData, '下载名');
    }
}

// ...

不使用 <a href="xxx" download="xxx"></a> 因为base64过长，造成点击a标签时无反应