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-qr
ref="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 格式
});
},
效果图: