需要一個插件 qrcodejs2， 使用 npm install qrcodejs2 --save 下載該依賴包。

在vue中引入(我這邊是vue2)。import QRCode from 'qrcodejs2';

在計算屬性中使用它。

computed: {QRCode,},

在dom結構中設置一個容器來承載它，并設置一個id.

<div id="qrcode" style="display: none"></div> // 如果要顯示這個二維碼就不要設置display:none

然后可以在需要下載生成二維碼的地方觸發(fā)這個事件

生成二維碼。

qrcode(val) { // 生成二維碼函數(shù)document.getElementById('qrcode').innerHTML = ''; // 清空dom元素內容，防止污染canvas const qrcode = new QRCode('qrcode', {width: 200,height: 200, // 高度text: 'http://wx.qlogo.cn/mmhead/Q3auHgzCEVqspSUMou272WfP9OAJ1dNl0zr6uQ/0xxx', // 二維碼內容 這個自己跟換地址 內容// render: 'canvas' , // 設置渲染方式（有兩種方式 table和canvas，默認是canvas）background: '#f0f', // 背景色foreground: '#ff0', // 前景色});console.log(qrcode, 'qrcode');this.saveImg(); // 下載函數(shù)return qrcode;// console.log(qrcode, '444444');},

生成二維碼后就調用下載(如果你們只需要生成二維碼就不需要這步)

saveImg() {// 找到canvas標簽const cvs = document.getElementById('qrcode').getElementsByTagName('canvas');console.log(cvs, '[[');// 創(chuàng)建一個a標簽節(jié)點const a = document.createElement('a');// 設置a標簽的href屬性（將canvas變成png圖片）a.href = cvs[0].toDataURL('image/png').replace('image/png', 'image/octet-stream');// 設置下載文件的名字a.download = 'qrcode.png';// 點擊a.click();},

到此就完成了前端根據(jù)參數(shù)生成二維碼，并下載。

項目需求 使用element 表格 來動態(tài)生成二維碼，要求鼠標移入時顯示二維碼。
注意這里code 函數(shù)是放在 methods 里面的，不要試圖使用計算屬性來觸發(fā)，有可能會重復渲染二維碼。

截出部分項目中代碼

<template v-if="item.prop === 'linkCodeUrl'" #default="{ $index }"><p class="p" @click="copy(data[$index])">復制鏈接</p><el-popover popper-class="cloud-qrcode" placement="right" width="200" trigger="hover"><div :id="`qrcode${$index}`"></div><spanslot="reference"class="p"@click="downloadCode(data[$index], $index)"@mouseover="code(data[$index].id, $index)">下載二維碼</span></el-popover></template>

js部分

code(val, index) {console.log(index, 'pindex');this.$nextTick(() => {document.getElementById(`qrcode${index}`).innerHTML = '';const url = xxxxxx?id=${val}`;const qrcode = new QRCode(`qrcode${index}`, {width: 200,height: 200,text: url,background: '#f0f',foreground: '#ff0',});return qrcode;});},

效果圖：

總結

以上是生活随笔為你收集整理的vue js前端根据所需参数生成二维码并下载的全部內容，希望文章能夠幫你解決所遇到的問題。

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