直接上代码
<el-button @click=‘setEwm’>打开弹框二维码</el-button>
<el-dialog v-model="centerDialogVisible" align-center >
<div class="code">
<div class="content" id="qrCodeUrl" ref="qrCodeUrl"></div>
</div>
<div style="display:flex;justify-content:center">
<el-button type="primary" @click="saveCode()" >保存二维码</el-button>
</div>
</el-dialog>
<script>
import QRCode from 'qrcodejs2-fix';
export default {
data(){
return {
qrCode:''
}
}
//生成二维码
methods:{
//生成二维码
setEwm(){
this.centerDialogVisible=true
this.$nextTick(() => {
this.QRCode= new QRCode(this.$refs.qrCodeUrl, {
text: this.qrCode, // 需要转换为二维码的内容
width: 260, // 二维码的宽度
height: 260, // 二维码的高度
colorDark: "#000000", // 二维码的深色部分
colorLight: "#ffffff", // 二维码的浅色部分
correctLevel: QRCode.CorrectLevel.H, // 二维码的纠错水平
})
})
},
// 保存二维码
saveCode(name){
//获取二维码中格式为imag的元素
const nodeList = Array.prototype.slice.call(this.QRCode._el.children)
const img = nodeList.find((item) => item.nodeName.toUpperCase() === 'IMG')
// 选出图片类型
// 构建画布
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0);
// 构造url
let url = canvas.toDataURL('image/png');
const a = document.createElement("a");
a.href = url;
a.download = `${name}医生二维码.png`;
// 触发a链接点击事件,浏览器开始下载文件
a.click();
},
}
}
</script>