vueelementadmin__0">vue-element-admin 生成二维码,并实现点击下载功能
本人项目中,是需要实现在表格中显示支付链接,并将支付链接渲染成二维码,管理员点击二维码后,直接下载此二维码,用于分享给客户,实现h5支付功能。
由于我这里是在表格渲染的,会出现使用 :ref="Qrcode"时,点击事件 downloadImg 会重复下载的同一张二维码,所以我在这里给 Qrcode 拼接上了唯一的链接id,这样在下方下载时,也拼接上link_id,就可以区分了。
javascript"> <el-table-column :label="$t('table_order.qr_code')" align="center" width="70">
<template slot-scope="{row}">
<el-tooltip content="点击下载二维码" placement="top-start">
<span @click="downloadImg(row.link_id)">
<vue-qr
:ref="'Qrcode' + row.link_id"
:text="row.pay_link"
:margin="10"
:size="500"
:dot-scale="qrCodeConfig.dotScale"
:color-dark="qrCodeConfig.colorDark"
:width="30"
/>
</span>
</el-tooltip>
</template>
</el-table-column>
- 点击事件调起的 下载方法
javascript"> methods: { downloadImg(link_id) { const iconUrl = this.$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) } }
- 列表效果展示
6.下载效果展示
如有微信可 VX联系 qubojie