今天学习使用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});
}