element table展示二维码及下载

使用element ui 的table组件循环渲染二维码以及踩坑

下载安装依赖

npm install qrcodejs --save-dev

import QRCode from 'qrcodejs2';

 <xx-table-column prop="qrcode_src" min-width="76" label="二维码">
       <template slot-scope="scope">
            <div @mouseenter="getQRCodeUrl(scope.row.source_url, scope.row.id)">
                <xx-tooltip placement="right" effect="light" class="Fragment">
                    <div slot="content">
                        <div :ref="'qrcodeBox' + scope.row.id" class="qrcode-box"></div>
                        <span class="sourceName">{{ scope.row.source_name }}</span>
                    </div>
                    <xx-button
                        type="text"
                        size="small"
                        @click="downloadSingleUrl(scope.row)"
                        >下载</xx-button
                    >
                </xx-tooltip>
            </div>
        </template>
</xx-table-column>

getQRCodeUrl(qrcode_url, id) {
			// 此处是一个坑，
            this.$refs['qrcodeBox' + id].innerHTML = '';
            new QRCode(this.$refs['qrcodeBox' + id], {
                text: qrcode_url, // 需要转换为二维码的内容
                width: 60,
                height: 60,
                // render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                colorDark: '#000000', //二维码颜色
                colorLight: '#ffffff', //二维码背景色
                correctLevel: QRCode.CorrectLevel.H //容错率，L/M/H
            });
        },

首先实现的是鼠标移入的时候才展示对应的二维码，不用一开始就全部加进去，生成二维码的函数是官方给出的，是可以通过id或这ref获取唯一标识拿到DOM添加元素。但是由于列表数据是table循环生成的，所有id或者ref的并不唯一，会导致一个结果，也是我开发中遇到的坑。鼠标移入上去的时候并不展示二维码，其实不是没有生成，也不是没有展示。而是所有生成的二维码，都加在列表的最后一行的引用dom中。把前面生成的叠加在一起。
解决方法在上面的代码中，就是ref 后面拼接一个唯一的标识，我们后端返回的每条是有一个唯一的id，具体按照你们公司的数据来拼接。

二维码单个下载封装

downloadSingleUrl(params) {
    var canvasData = this.$refs['qrcodeBox' + params.id].getElementsByTagName('canvas');
    var a = document.createElement('a');
    var event = new MouseEvent('click'); // 创建一个单击事件
    a.href = canvasData[0].toDataURL('image/png');
    a.download = params.source_name; // 下载的文件名，跟你传入的数据来命名
    a.dispatchEvent(event); // 触发a的单击事件
},