直接上代码
<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=truethis.$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);// 构造urllet url = canvas.toDataURL('image/png');const a = document.createElement("a");a.href = url;a.download = `${name}医生二维码.png`;// 触发a链接点击事件,浏览器开始下载文件a.click();},}}</script>