二维码的生成与下载

npm install qrcodejs2

<template>
    <div class="home-header">
        <div class="logo-class">
            <img :src="require('@/assets/home/header-logo.png')">
        </div>

        <div class="right-class">
            <span v-popover:popover class="qrcode" @click="prevClick">商户二维码</span>
            <el-popover ref="popover" placement="bottom-end" width="150" trigger="manual" v-model="qrcodeVisible">
                <div id="previewQrcode"></div>
                <div class="edu-qrcode">教育缴费二维码</div>
                <div class="edu-qrcode">
                    <el-button class="normal-button" type="primary" @click="downloadAllQrcode">全部下载</el-button>
                </div>
            </el-popover>
        </div>
<div @click.stop="qrcodeVisible = false" v-if="qrcodeVisible"
            style="position: fixed;z-index: 1000;width: 100%;height: 100vh;background: rgba(0,0,0,0);top: 0;left: 0;">
        </div>
    </div>
</template>
<script>
import { MM0917 } from '@/api/educationPayment';
import QRCode from 'qrcodejs2';
export default {
    data() {
        return {
            qrcodeVisible: false,
            qrcodeStr: '',
            qrcodeObj: null,
        };
    },

// 第二步，生成二维码并展示
    watch: {
        qrcodeStr(val) {
            if (!this.qrcodeObj) {
                this.qrcodeObj = new QRCode('previewQrcode', {
                    width: 150,
                    height: 150, // 高度
                });
            }
            if (val) {
                this.qrcodeObj.clear();
                this.qrcodeObj.makeCode(val);
                this.qrcodeVisible = !this.qrcodeVisible;
            }
        },
    },
    methods: {
        myBrowser() {
            const userAgent = navigator.userAgent;
            const isOpera = userAgent.indexOf('Opera') > -1;
            if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) {
                return 'IE';
            }
            if (userAgent.indexOf('Trident') > -1) {
                return 'Edge';
            }
            return null;
        },
        // 第三步，创建下载用的 a 标签
        createA(obj) {
            const brower = this.myBrowser();
            if (brower === 'IE' || brower === 'Edge') {
                const bstr = atob(obj.url.split(',')[1]);
                let n = bstr.length;
                const u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                const blob = new Blob([u8arr]);
                window.navigator.msSaveOrOpenBlob(blob, '商户二维码.png');
            } else {
                const a = document.createElement('a');
                a.id = obj.id;
                a.target = '_blank';
                a.href = obj.url;
                a.download = '商户二维码';
                document.body.appendChild(a);
            }
        },

        // 第四步，获取要下载的图片， over
        downloadAllQrcode() {
            let imgs = document.querySelectorAll('img');
            // 有一张二维码就是最后一张，有两张就是最后两张
            const length = imgs.length;
            imgs = [imgs[length - 1]];

            for (let i = 0; i < imgs.length; i++) {
                const obj = {
                    id: `img_${i}`,
                    url: imgs[i].src,
                };
                this.createA(obj);
                if (document.getElementById(`img_${i}`)) {
                    document.getElementById(`img_${i}`).click();
                }
            }
        },

        // 第一步，获取二维码的链接
        prevClick() {
            this.qrcodeStr = '';
            MM0917({}).then((res) => {
                const data = res.body;
                this.qrcodeStr = `/payment/query/index.html?merchantId=${data.id}&merchantName=${data.merchantName}`;
            }).catch((err) => {
                tools.errorAlert(err);
            });
        },
    },
};
</script>
、