vue-qr 生成二维码 可以下载

安装 qrcode ,使用npm

npm install vue-qr --save

在使用页面引入

import vueQr from 'vue-qr'
components: {
    vueQr
  },

页面映入

        <el-table-column label="活动二维码" align="center">
          <template slot-scope="{row}">
            <el-tooltip content="点击下载二维码" placement="top-start">
              <span @click="downloadImg(row.id)">
                <vue-qr :text="row.link" :ref="'Qrcode' + row.id" :margin=" 0" colorLight="#fff" :logoScale="0.3" :size="100"></vue-qr>
              </span>
            </el-tooltip>
          </template>
        </el-table-column>

下载方法

  downloadImg (link_id: string): void {
    console.log(link_id)
    const iconUrl = (this as any).$refs['Qrcode' + link_id].$el.src
    const a = document.createElement('a')
    const event = new MouseEvent('click')
    a.download = link_id
    a.href = iconUrl
    a.dispatchEvent(event)
  }

image.png

image.png

image.png