vue-qr的使用和下载

vue-qr的使用和下载

项目中会用到二维码的时候可以这样做。

在package.json中引入后下载

"vue-qr": "^2.3.0",

使用的页面注册

import VueQr from 'vue-qr';

vue部分

<el-dialog class="qr_code" :visible="true" width="450px" @close="close">
            <div>
                <div>此二维码用于XXX</div>
                <div id="qrCode" ref="qrCode">
                    <vue-qr
                        :text="qrCode"
                        color-dark="#000"
                        color-light="#fff"
                        :dot-scale="1"
                        :logo-scale="0.2"
                    />
                </div>
            </div>
            <div>
                <el-button type="primary" @click="getQrCodeImage()">下载</el-button>
                <el-button @click="close">取消</el-button>
            </div>
 </el-dialog>

javaScript部分

export default {
    name: 'ExcelQrcode',
    components: { VueQr },
    props: {
        qrCode: {
            type: String,
            default: ''
        }
    },
    methods: {
        close() {
            this.$emit('close');
        },
        // 获取二维码图片
        getQrCodeImage() {
            var canvasData = document.getElementById('qrCode').getElementsByTagName('img');
            var a = document.createElement('a');
            a.href = canvasData[0].src;
            a.download = '二维码.png';
            a.click();
        }
    }
};