后台返回:
1,npm命令下载qrcode
(1)在项目文件夹中
npm install --save qrcode
(2)或在全局中安装
npm install -g qrcode
2,引入
import QRCode from 'qrcodejs2' // 引入qrcode
3,在HTML中引入
<!-- 二维码 -->
<div>
<div style="width: 148px;">二维码</div>
<div>
<div id="qrcode"></div>
<div>
<el-button @click="downLoad" class="nowBtn">立即下载</el-button>
</div>
</div>
</div>
4,在data中定义
data() {
return {
// 二维码
qrCode: ''
}
}
5,在methods中
methods: {
// 获取
getDeviceInfo() {
this.getQrCode();
}
downLoad() {
let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
let a = document.createElement('a')
a.href = myCanvas[0].toDataURL('image/png');
a.download = '二维码';
a.click()
this.$message({
message: "正在进行下载保存",
type: 'success'
})
},
getQrCode() {
let qrcode = new QRCode('qrcode', {
width: 132,
height: 132,
text: this.model.qrCode, // 二维码地址
colorDark: "#000",
colorLight: "#fff",
})
},
}