记录使用QRCode 显示并下载二维码图片

记录使用QRCode 生成二维码

项目安装qrcode 命令：npm install --save qrcodejs2
引入 import QRCode from ‘qrcodejs2’
后端提供qrcodeId
使用场景vue element el-table

例如表格数据tableData

mounted(){
	this.tableData = [ {qrCodeId:'147152707256324096'} ]
	this.tableData.forEach(item=>{
		this.qrcodeFun(item.qrCodeId)
	})
}

表格内

<el-table-column  label='二维码'>
    <template slot-scope='scope'>
       <div :id="'qrcode'+scope.row.qrCodeId" class='qrcode-box'></div>
    </template>
</el-table-column>

初始化数据时调用下面方法

method:{
	 /**
     * 生成二维码图片
     * @param qrcodeId  二维码url
    * */
	qrcodeFun(qrcodeId){
		//防止未渲染页面就调用方法找不到对应元素Id
	    this.$nextTick(()=>{
	    	// 'qrcode'+qrcodeId保证id唯一性
	        document.getElementById('qrcode'+qrcodeId).innerHTML = '';
	        new QRCode( 'qrcode'+qrcodeId,{
	            width:100,
	            height:100,
	            text:qrcodeId,
	            colorDark:'#000',
	            colorLight:'#fff',
	            correctLevel:QRCode.CorrectLevel.H
	        })
	    })
	},	
}

 /**
   * 打印二维码
   * @param qrcodeId  二维码url
  * */
   printQRCode(qrcodeId){
        const myCanvas = document.getElementById('qrcodeDown'+qrcodeId).getElementsByTagName('canvas')
        const a = document.createElement('a');
        a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
        a.download = '设备二维码'+new Date().getTime()+'.png'
        a.click()
        this.$message.success('正在下载。');
   },

最终显示如下