這里說下qrcode 這個(gè)插件 生成二維碼，并且可以點(diǎn)擊下載

效果：后臺(tái)獲取數(shù)據(jù)渲染

1.安裝qrcode npm install qrcode
2.在需要的頁面中 import QRCode from 'qrcode’
3.html

mounted() {let canvas = this.$refs.canva; //渲染的時(shí)候是個(gè)數(shù)組所以跟單個(gè)畫圖還有點(diǎn)不一樣 得到的是個(gè)數(shù)組for(let i in canvas){QRCode.toCanvas(canvas[i], this.$store.state.userInfo.projectVoList[i].join_manage_url, function (error) {//第二個(gè)參數(shù)是urlif (error) console.error(error)console.log('success!');})}},

4.效果

5。點(diǎn)擊按鈕保存圖片，這是一個(gè)canvas

<el-button type="primary" @click="exportCanvasAsPNG('erweima',index)">下&nbsp;載</el-button>exportCanvasAsPNG( fileName,index) { var canvasElement = this.$refs.canva[index];var MIME_TYPE = "image/png";var imgURL = canvasElement.toDataURL(MIME_TYPE);var dlLink = document.createElement('a');dlLink.download = fileName;dlLink.href = imgURL;dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');document.body.appendChild(dlLink);dlLink.click();document.body.removeChild(dlLink);},

6：效果

總結(jié)

以上是生活随笔為你收集整理的生成二维码 并可以点击下载(多个二维码一起渲染)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。