Vue生成二维码并进行二维码图片下载

1、安包

npm install vue-qr --save

2、引入

// vue2.0
import VueQr from 'vue-qr'
// vue3.0
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({
    components: {VueQr}
})

 
        <el-dialog title="点位二维码" :visible.sync="codeOpen" :before-close="handleClose" width="500px" append-to-body>
            <div id="draggableWin" style="background-color:white">
                <el-container style="height: 300px;">
                    <el-header style="height: 80px;">
                        <div style="font-size:20px;margin-top: 25px;margin-left: -10px;color: black; height:100px">
                            Vue生成二维码并进行二维码图片下载
                        div>
                    el-header>
                    <el-container style="background-color:#18409A">
                        <el-aside width="260px" style="background-color:#18409A;color: white; font-size: 15px;">
                            <el-row style="color: white;">
                                <el-col autocomplete="off">
                                    <span style="color: white;">点位名称：{{ codePointName }}span>
                                el-col>
                                <el-col autocomplete="off">
                                    <span style="color: white; width: auto;">点位类型：{{ codePointType }}span>
                                el-col>
                                <el-col autocomplete="off">
                                    <span style="color: white; width: auto;">负责人：赵虎婷span>
                                el-col>
                                <el-col autocomplete="off">
                                    <span style="color: white; width: auto;">启用时间：{{ codeCreateTime }}span>
                                el-col>
                            el-row>
                        el-aside>
                        <el-main style=" margin-left: 20px; height: 200px; background-color:#18409A; padding: 15px"><vue-qr
                                ref="qrCode" @callback="callback" :text="codeText" :size="150" :correctLevel=3
                                :margin="5">vue-qr>el-main>
                    el-container>
                el-container>
            div>
            <el-col style=" text-align: center;  font-size: 15px; color: #82848a; margin-top: 10px;">请将该二维码张贴到对应位置el-col>
            <span slot="footer" class="dialog-footer">
                <el-button @click="codeOpen = false">取 消el-button>
                <el-button type="primary" @click="downloadQRCode">下 载el-button>
            span>
        el-dialog>

 /**
         * 关闭二维码窗口
         */
        handleClose(done) {
            done();
        },
        callback(res) {
            console.log("正在下载图片", res)
        },
        downloadQRCode(res) {
            var shareContent = document.getElementById('draggableWin');
            html2canvas(shareContent, { scale: 2 }).then(imgUrl => {
                // console.log('转成图片', imgUrl);
                // // 转成图片，生成图片地址(如需将图片转为file 文件，请自行处理)

                var img = document.createElement('img');
                img.style.display = 'none';
                document.body.appendChild(img);
                var codeRemark = this.codeRemark;
                img.onload = function () {
                    var canvas = document.createElement('canvas');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    var context = canvas.getContext('2d');
                    context.drawImage(img, 0, 0, img.width, img.height);
                    var url = canvas.toDataURL('image/png');

                    var a = document.createElement('a');
                    a.download = codeRemark + '二维码';
                    a.href = url;

                    document.body.appendChild(a);
                    a.click();

                    // 清理添加的元素
                    document.body.removeChild(a);
                    document.body.removeChild(img);
                };
                img.src = imgUrl.toDataURL("image/png", 0.8); //可将 canvas 转为 base64 格式

            });
        },

效果图：