vue uses qrcode2 to generate QR code content unchanged problem

 

Today I learned to use the vue front-end to generate QR codes and save the function; I found that the generated content remained unchanged; finally I found that there was a problem with the text assignment; the code is directly below.

Install plugin

#QR code 
npm install qrcodejs2

Code reference

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="学校名称" prop="schoolId">
        <el-select v-model="queryParams.schoolId" placeholder="请选择学校" clearable size="small">
          <el-option
            v-for="item in schoolList"
            :key="item.id"
            :label="item.schoolName"
            :value="item.id"
            :aria-selected="form.schoolId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年级" prop="gradeId">
        <el-select v-model="queryParams.gradeId" placeholder="请选择年级" clearable size="small">
          <el-option
            v-for="item in gradeList"
            :key="item.id"
            :label="item.gradeName"
            :value="item.id"
            :aria-selected="form.gradeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['books:schoolGrade:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['books:schoolGrade:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['books:schoolGrade:remove']"
        >删除</el-button>
      </el-col>
	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="schoolGradeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="记录" align="center" prop="id" />
      <el-table-column label="学校" align="center" prop="schoolId" :formatter="getSchoolFormat"/>
      <el-table-column label="年级" align="center" prop="gradeId" :formatter="getGradeFormat"/>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="creatQrCode(scope.row)"
            v-hasPermi="['books:schoolGrade:edit']"
          >二维码</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['books:schoolGrade:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['books:schoolGrade:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改学校对应年级对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="学校" prop="schoolId">
          <el-select v-model="form.schoolId" placeholder="请选择学校">
            <el-option
              v-for="item in schoolList"
              :key="item.id"
              :label="item.schoolName"
              :value="item.id"
              :aria-selected="form.schoolId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年级" prop="gradeId">
          <el-select v-model="form.gradeId" placeholder="请选择年级">
            <el-option
              v-for="item in gradeList"
              :key="item.id"
              :label="item.gradeName"
              :value="item.id"
              :aria-selected="form.gradeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 二维码对话框 -->
    <el-dialog center :title="title" :visible.sync="openQr" width="500px">
      <div style="text-align: center">
      <div id="qrcode" style="width: 240px; margin: 0px auto; border: 10px solid rgb(255, 255, 255);" ref="qrCodeUrl"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelQr">取 消</el-button>
        <el-button type="primary" @click="saveQrCode2">保存二维码</el-button>
      </div>
    </el-dialog>
  </div>
</template>

 The problem occurs when generating a QR code. The given text content is of pure numeric type, causing the generated content to be the same every time. The specific reason has not been studied in depth. Here, as long as the id is converted into a string, it will succeed;

text: row.schoolId+''

import QRCode from 'qrcodejs2'
//引用保存二维码js
import {saveQrCode} from "@/api/qrcode2";
data() {
    // 其他参数*****省略
    // 是否显示二维码弹出层
    openQr: false,
    // 弹出层标题
    title: ""
},
methods: {
/**
     * 生成二维码
     */
    creatQrCode(row) {
      this.openQr = true;
      this.title = '《'+row.schoolName+' 》二维码';
      // 延时执行可以解决首次加载失败问题
      setTimeout(() => {
        document.getElementById('qrcode').innerHTML = "";
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
//注意这里使你二维码生成失败，必须是字符串，所以必须转换一下；我的id是数字类型
          text: row.schoolId+'',
          width: 220,
          height: 220,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      }, 500)
    },
    // 保存二维码
    saveQrCode2(){
      // //找到canvas标签
标签对象必须在使用页面调用，不然保存时提示失败，具体原因没深入研究
      let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
      let img=document.getElementById('qrcode').getElementsByTagName('img');
      saveQrCode(myCanvas,img,this.title)
    }
}

 Apply to save QR code

qrcode2.js

/**
 * 保存二维码
 * @param myCanvas 画布对象，必须在使用页面初始化，不然识别不了
 * @param img 图片对象，必须在使用页面初始化，不然识别不了
 * @param title 下载保存文件名称
 */
export function saveQrCode(myCanvas,img,title){
  // //找到canvas标签
  // let myCanvas = document.getElementById(tagId).getElementsByTagName('canvas');
  // let img=document.getElementById(tagId).getElementsByTagName('img')
  // // //创建一个a标签节点
  let a= document.createElement("a")
  // //设置a标签的href属性（将canvas变成png图片）
  let imgURL=myCanvas[0].toDataURL('image/jpg');
  let ua = navigator.userAgent;
  if (ua.indexOf("Trident") != -1 && ua.indexOf("Windows") != -1) { // IE内核 并且  windows系统 情况下 才执行;
    var bstr = atob(imgURL.split(',')[1])
    var n = bstr.length
    var u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    var blob = new Blob([u8arr])
    window.navigator.msSaveOrOpenBlob(blob, title + '.' + 'png')
  }else if(ua.indexOf("Firefox") > -1){ //火狐兼容下载
    let blob = this.base64ToBlob(imgURL); //new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    a.download = ' ';//下载图片名称，如果填内容识别不到，下载为未知文件，所以我这里就不填为空
    a.href = URL.createObjectURL(blob);
    a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
  }else{ //谷歌兼容下载
    img.src=myCanvas[0].toDataURL('image/jpg');
    // a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
    a.href=img.src
    //设置下载文件的名字
    a.download = title
    //点击
    a.click()
  }
}
//base64转blob
export function base64ToBlob(code) {
  let parts = code.split(';base64,');
  let contentType = parts[0].split(':')[1];
  let raw = window.atob(parts[1]);
  let rawLength = raw.length;
  let uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], {type: contentType});
}