首先项目引入依赖包 npm install qrcodejs2
然后在指定页面引入 import QRcode from "qrcodejs2"
页面部分,我的是一个弹窗
<el-dialog
title="二维码"
:visible.sync="dialogVisible"
center
>
<div>
<div id="qrcode"></div>
<div><button @click="downloadQrcode">导出</button></div>
</div>
</el-dialog>
点击查看二维码
handleQrcodde(){
this.dialogVisible = true
setTimeout(()=>{
document.getElementById("qrcodde").innerHTML = "" //每次清空元素,防止叠加
let qrcode = new QRcode("qrcode",{
width:188,
height:188,
colorDark:'#666',
colorLight:'#fff'
})
qrcode.clear();
qrcode.makeCode('二维码内容')
},500)
}
下载二维码
downloadQrcode ( fileName , content ){
let canvas = document . getElementsByTagName (" canvas ")[0]
let base64Img= canvas . toDataURL ("");
let link = document . createElement (" a ");
link. href =base64Img
link . download =" code + Date . now ();
let event = document . createEvent (" MouseEvents ");
event . initMeuseEvent (
click ",
true ,
false ,
window ,
false ,
false ,
false ,
false ,
nu11
)
link . dispatchEvent ( event );
}