前端生成二維碼，且可以下載下傳

首先項目引入依賴包 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 );

}