1、安包
npm install vue-qr --save
2、引入
// vue2.0
import VueQr from 'vue-qr'
// vue3.0
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({components: {VueQr}
})
<!-- 设备二维码 对话框 270px--><el-dialog title="点位二维码" :visible.sync="codeOpen" :before-close="handleClose" width="500px" append-to-body><div id="draggableWin" style="background-color:white"><el-container style="height: 300px;"><el-header style="height: 80px;"><div style="font-size:20px;margin-top: 25px;margin-left: -10px;color: black; height:100px">Vue生成二维码并进行二维码图片下载</div></el-header><el-container style="background-color:#18409A"><el-aside width="260px" style="background-color:#18409A;color: white; font-size: 15px;"><el-row style="color: white;"><el-col autocomplete="off"><span style="color: white;">点位名称：{{ codePointName }}</span></el-col><el-col autocomplete="off"><span style="color: white; width: auto;">点位类型：{{ codePointType }}</span></el-col><el-col autocomplete="off"><span style="color: white; width: auto;">负责人：赵虎婷</span></el-col><el-col autocomplete="off"><span style="color: white; width: auto;">启用时间：{{ codeCreateTime }}</span></el-col></el-row></el-aside><el-main style=" margin-left: 20px; height: 200px; background-color:#18409A; padding: 15px"><vue-qrref="qrCode" @callback="callback" :text="codeText" :size="150" :correctLevel=3:margin="5"></vue-qr></el-main></el-container></el-container></div><el-col style=" text-align: center; font-size: 15px; color: #82848a; margin-top: 10px;">请将该二维码张贴到对应位置</el-col><span slot="footer" class="dialog-footer"><el-button @click="codeOpen = false">取 消</el-button><el-button type="primary" @click="downloadQRCode">下 载</el-button></span></el-dialog>
/*** 关闭二维码窗口*/handleClose(done) {done();},callback(res) {console.log("正在下载图片", res)},downloadQRCode(res) {var shareContent = document.getElementById('draggableWin');html2canvas(shareContent, { scale: 2 }).then(imgUrl => {// console.log('转成图片', imgUrl);// // 转成图片，生成图片地址(如需将图片转为file 文件，请自行处理)var img = document.createElement('img');img.style.display = 'none';document.body.appendChild(img);var codeRemark = this.codeRemark;img.onload = function () {var canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;var context = canvas.getContext('2d');context.drawImage(img, 0, 0, img.width, img.height);var url = canvas.toDataURL('image/png');var a = document.createElement('a');a.download = codeRemark + '二维码';a.href = url;document.body.appendChild(a);a.click();// 清理添加的元素document.body.removeChild(a);document.body.removeChild(img);};img.src = imgUrl.toDataURL("image/png", 0.8); //可将 canvas 转为 base64 格式});},
效果图：
