vue-qr自动生成二维码并下载

第一步安装
npm install vue-qr --save

第二步引入组件

import VueQr from 'vue-qr'

components:{
           VueQr
        },

<vue-qr   :logoSrc="config.logo" :text="scope.row.url" :size="200" :margin="0"></vue-qr></div>  

现在就可以扫码查看你的二维码了

-------------------------------------------------------------------------（华丽的分割线）---------------------------------------------------------------------

这是下载方式

定义一个下载按钮事件（scope.$index）这是获取element中table组件里面数组的索引

 

 

源代码

HTML

<el-table-column label="操作" align="center" width="300">
     <template slot-scope="scope">
           <el-button type="danger" size="mini"  @click="downloadImg(scope.$index+1, scope.row.url)">下载二维码</el-button>
             <div class="channelQrcode" >
                 <vue-qr   :logoSrc="config.logo" :text="scope.row.url" :size="200" :margin="0"></vue-qr></div>
          </template>

 </el-table-column>

js

downloadImg (index, item) {
                    console.log(index,item)
                        var oQrcode = document.querySelectorAll('.channelQrcode img')
                        var url = oQrcode[index].src
                        var a = document.createElement('a')
                        var event = new MouseEvent('click')
                        // 下载图名字
                        a.download = item.channel_name
                        a.href = url
                        // 合成函数，执行下载
                        a.dispatchEvent(event)
                },