填報二維碼生成
http://code.ciaoca.com/javascript/qrcode/demo/

git倉庫地址

<el-table :data="scenicForm" style="width: 100%" border><el-table-column label="二維碼" width="180"><template slot-scope="scope"><div :id="'item_' + scope.row.id"></div><a href="" download="erweima">點擊下載二維碼</a></template></el-table-column> </el-table> export default {data() {return {}},methods:{// 生成二維碼qrcode(qrcode, text) {let qrcode2 = new QRCode(qrcode, {width: 100,height: 100, // 高度text: text // 二維碼內容}),getInfo(){//獲取表格數據//......this.$store.dispatch('sInfo').then(data => {if (!data) {this.$message({message: '沒有信息',type: 'warning'});return;}this.scenicForm = data.list;// 清空已存在的二維碼this.$nextTick(() => {data.list.forEach(item => {let gid = 'item_' + item.id;let parent=document.getElementById(gid)let children = parent.getElementsByTagName('img');if(children.length >0){for(let i=0;i<children.length;i++){parent.removeChild(children[i]);} }});//生成二維碼this.$nextTick(() => {data.list.forEach(item => {this.qrcode('item_' + item.id, item.qp_code || this.testerweima);let gid = 'item_' + item.id;setTimeout(() => {// 下載圖片地址document.getElementById(gid).nextElementSibling.href = document.getElementById(gid).children[1].src;});});});});}},

一定要在div生成之后再生成二維碼，否則就會出現Cannot read property ‘appendChild’ of null"的錯誤

如果是點擊按鈕調用，就用click方法，如果是組件渲染得時候調用，就寫在mouted里面

總結

以上是生活随笔為你收集整理的前端QRCode.js生成二维码插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。