|
需求：根据某字段生成二维码并且可以下载该二维码
分析：通过qrcodejs2插件生成二维码
qrcodejs2插件的·使用
一、安装
npm install qrcodejs2 --save
二、页面上导入
import QRCode from ‘qrcodejs2’
三、提供容器，并给容器添加ref属性
四、调用实例方法
具体代码如下：
<template>
<div class="box">
<div class="title">qrcode二维码插件的使用</div>
<div class="paycode">
<!-- 放置二维码的容器,需要给一个ref -->
<div class="qrcode" ref="qrCodeUrl" id="qrcode"></div>
</div>
<el-button @click="productCode">生成二维码</el-button>
<el-button @click="downloadAppCodeImg">点击下载二维码</el-button>
<el-button @click="closeCode">清空二维码</el-button>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
data() {
return {
centerDialogVisible: false,
};
},
methods: {
// 生成二维码
productCode() {
console.log(1);
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
// 这里选择器也可以直接写 'qrcode' 用的是id选择器 指示不需要带 # 而已
text: "tc202110075320", // 生成二维码的 内容
width: 100, // 宽 单位 px
height: 100, // 高 单位 px
// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
// background: '#f0f'
// foreground: '#ff0'
correctLevel: QRCode.CorrectLevel.H, // 二维码容错 级别
});
},
// 下载二维码
downloadAppCodeImg(name) {
var canvasData = document
.getElementById("qrcode")
.getElementsByTagName("img"); //生成二维码之后其实是个img 所以获取完id之后还要获取到这个img 才能下载成功
var a = document.createElement("a");
console.log("xiazai", canvasData);
a.href = canvasData[0].src;
a.download = "二维码.png";
a.click();
},
// 清空二维码
closeCode() {
this.$refs.qrcode.innerHTML = "";
},
},
};
</script>
<style lang="less" scoped>
.title {
font-size: 20px;
}
.el-button {
margin-top: 20px;
}
</style>
|