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 格式});},

效果圖：