vue使用qrcode2生成二维码内容不变问题

最新推荐文章于 2024-08-09 13:40:51 发布

法法-發發發

最新推荐文章于 2024-08-09 13:40:51 发布

阅读量1.6k

点赞数

分类专栏： vue部署前端样式保存不了图

本文链接：https://blog.csdn.net/xingfaup/article/details/113063448

版权

Vue 二维码生成 qrcodejs2 数字转字符串保存二维码

关键词由CSDN通过智能技术生成

vue部署同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端样式

4 篇文章 0 订阅

订阅专栏

保存不了图

2 篇文章 0 订阅

订阅专栏

今天学习使用vue前端生成二维码并保存功能；发现生成内容不变；最后发现text赋值出现问题；下面直接上代码。

安装插件

#二维码
npm install qrcodejs2

代码引用

<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>

问题出现在生成二维码时，给的text内容是纯数字类型导致生成内容每次都一样，具体原因没深入研究；这里只要将id转成字符串就成功了；

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)
    }
}

应用保存二维码

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});
}