VUE将后端返回的二维码字符串生成二维码，并下载

第一个功能：当前页面中显示二维码

第一：安装

npm i qrcodejs2 --save

第二步：当前页面使用

<div id="qrcode" class="erweima" ref="qrcode"></div>

第三步：JS

<script type="text/javascript">
	//vue使用qrcode插件将后端返回的二维码字符串生成二维码
	import QRCode from 'qrcodejs2'
	export default {
		data() {
			return {
				qrcode : '',
				qr: '',
			}
		},
		mounted() {
			this.MyCode()
		},
		methods: {
			// 我的数据码
			MyCode() {
				this.$api.POSTTwo(this.$url.MyCode + localStorage.getItem('token'), '', (res) => {
					this.password = res.Data;
					// this.qrcode = res.Data;
					//具体代码
					this.qr = new QRCode('qrcode', {
						text: 'userCode=' + this.password,
						width: 160,
						height: 160,
						colorDark: "#000000",
						colorLight: "#ffffff",
						correctLevel : QRCode.CorrectLevel.H
					})
				})
			},
		}
	}
</script>

第二个功能：当前列表每条数据都包含各自的二维码，点击下载可以下载彼此的二维码 

第一步：安装

npm i qrcodejs2 --save

第二步：引入

//vue使用qrcode插件将后端返回的二维码字符串生成二维码
import QRCode from 'qrcodejs2'

第三步：页面中使用

<el-form-item label="二维码:" v-if="dialogStatus == 'seeDetail'">
	<div id="qrcode" class="qrcode" ref="qrCodeUrl"></div>
	<!--下载功能-->
	<el-button style="margin-top: 20px;" size="mini"
	    @click="downloadQRCode(temp.LabelName,temp.EndTime)">二维码下载</el-button>
	    
</el-form-item>

第四步：JS

// 点击用户详情时
seeDetail(row) {
	this.dialogStatus = 'seeDetail'
	console.log('打印row下的二维码字符串', row.LabelCode)

	//防止生成多个。（每次生成之前，把上一次的DOM节点的二维码删除掉，然后再添加新生成的二维码）
	this.$nextTick(function() {
		let dom = document.getElementById("qrcode");
		while (dom.firstChild) {
			dom.removeChild(dom.firstChild);
		}
		//调用字符串生成二维码的方法
		this.creatQrCode(row.LabelCode)
	});
},

//字符串生成二维码的方法
creatQrCode(LabelCode) {
	console.log('获取到的code', LabelCode)
	var qrcode = new QRCode(this.$refs.qrCodeUrl, {
		text: LabelCode, // 需要转换为二维码的内容
		width: 100,
		height: 100,
		colorDark: '#000000',
		colorLight: '#ffffff',
		correctLevel: QRCode.CorrectLevel.H
	})
},

//下载二维码图片
downloadQRCode(LabelName, EndTime) {
	let myCanvas = document.getElementById("qrcode").getElementsByTagName("canvas");
	let a = document.createElement("a");
	a.href = myCanvas[0].toDataURL("image/png");
	a.download = LabelName+'--'+EndTime; //图片名（自动匹配标签名称+标签截止时间）
	a.click();
	// console.log('打印下载', LabelName, EndTime)
},