当前位置：首页 > news >正文

vue-element根据后端返回的值，在表格内生成二维码并且下载

news 2025/6/21 22:12:29

1:安装qrcode

npm i qrcode

2:引入qrcode

import QRCode from 'qrcode'

3:页面

 <el-table-column label="二维码"><template slot-scope="scope"><div style="width: 50px;"><img :src="scope.row.qrCode" style="width: 50px;" /><el-button type="text" size="small" @click="editProductCode('下载',scope.row)" style="text-align: center;width: 50px">下载</el-button></div></template></el-table-column>

4:方法

   // 封装方法生产二维码async getCode (data) {console.log(data, ';;;')try {const dataSting = data.toString()const qrCodeData = await QRCode.toDataURL(dataSting)return qrCodeData} catch (e) {console.error(e)return null}},// 获取后端的数据async getData(){// 例如list是后端的数据for (const i of list) {i.qrCode = await this.getCode(i.equipment_code)}}// 下载二维码downloadCode(val,type){QRCode.toDataURL(val.equipment_code).then((url) => {// 创建一个下载链接const link = document.createElement('a')link.href = urllink.download = `${type}-${val.name}.png` // 下载文件名，可以根据需要进行修改// 模拟点击下载链接link.click()}).catch((error) => {console.error(error)})}