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

爬坑的小白

已于 2024-09-09 11:41:52 修改

阅读量512

点赞数 3

文章标签： vue.js javascript chrome

于 2024-09-09 10:57:33 首次发布

本文链接：https://blog.youkuaiyun.com/ZJ15981837003/article/details/142053178

版权

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 = url
          link.download = `${type}-${val.name}.png` // 下载文件名，可以根据需要进行修改

          // 模拟点击下载链接
          link.click()
        })
        .catch((error) => {
          console.error(error)
        })

   }