vue生成二维码，并实现点击下载功能

vue-element-admin 生成二维码，并实现点击下载功能

本人项目中，是需要实现在表格中显示支付链接，并将支付链接渲染成二维码，管理员点击二维码后，直接下载此二维码，用于分享给客户，实现h5支付功能。

1. 安装 qrcode ,使用npm

   npm install vue-qr --save
   

2. 在使用页面引入

   import vueQr from 'vue-qr'
   

3. 表格渲染

由于我这里是在表格渲染的，会出现使用 :ref="Qrcode"时，点击事件 downloadImg 会重复下载的同一张二维码，所以我在这里给 Qrcode 拼接上了唯一的链接id,这样在下方下载时，也拼接上link_id，就可以区分了。

	<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>

4. 点击事件调起的 下载方法

   	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)
   		}	
   	}
   

5. 列表效果展示
   

6.下载效果展示

如有微信可 VX联系 qubojie