技术标签: 保存不了图 vue部署 vue 前端样式 保存二维码 qrcode2 二维码生成 javascript
今天学习使用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>
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});
}
文章浏览阅读1.6k次,点赞5次,收藏20次。【有害垃圾】:电池(1 号、2 号、5 号)、过期药品或内包装等;【可回收垃圾】:易拉罐、小号矿泉水瓶;【厨余垃圾】:小土豆、切过的白萝卜、胡萝卜,尺寸为电池大小;【其他垃圾】:瓷片、鹅卵石(小土豆大小)、砖块等。文件结构|----classes.txt # 标签种类|----data-txt\ # 数据集文件集合|----images\ # 数据集图片|----labels\ # yolo标签。_垃圾回收数据集
文章浏览阅读272次。之前写到 通过封装的API 已经可以做到使用redis进行缓存天气信息但是这一操作每次都由客户使用时才进行更新 不友好 所以应该自己实现半小时的定时存入redis 使用quartz框架 首先添加依赖build.gradle中// Quartz compile('org.springframework.boot:spring-boot-starter-quartz'..._cityid=101280803
文章浏览阅读1.8k次,点赞2次,收藏8次。对于使用触发事件来反应的按钮传递参数如下:可以通过lambda对function的参数传递:t.Bind(wx.EVT_BUTTON, lambda x, textctrl=t: self.input_fun(event=x, textctrl=textctrl))前提需要self.input_fun(self,event,t):传入参数而同时两个Frame之间的参数传..._wxpython frame.bind
文章浏览阅读1.9k次。最近接到一个任务要开发消消乐小游戏,当然首先就想到乐cocosCreator来作为开发工具。开发本身倒没有多少难点。消消乐的开发官网发行的书上有专门讲到。下面主要总结一下开发中遇到的问题以及解决方法屏幕适配由于设计尺寸是750*1336,如果适应高度,则在iphonX下,内容会超出屏幕宽度。按宽适应,iphon4下内容会超出屏幕高度。所以就需要根据屏幕比例来动态设置适配策略。 onLoad..._750*1336
文章浏览阅读745次,点赞21次,收藏21次。web项目的框架,通常更简单的数据源。21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存储达到准确、快速、完善,并能提高工作管理效率,促进其发展。论文主要是对银行贷款管理系统进行了介绍,包括研究的现状,还有涉及的开发背景,然后还对系统的设计目标进行了论述,还有系统的需求,以及整个的设计方案,对系统的设计以及实现,也都论述的比较细致,最后对银行贷款管理系统进行了一些具体测试。_vue3重构信贷管理系统
文章浏览阅读774次。题目描述原题目戳这里小明过生日的时候,爸爸送给他一副乌龟棋当作礼物。乌龟棋的棋盘是一行 NNN 个格子,每个格子上一个分数(非负整数)。棋盘第 111 格是唯一的起点,第 NNN 格是终点,游戏要求玩家控制一个乌龟棋子从起点出发走到终点。乌龟棋中 MMM 张爬行卡片,分成 444 种不同的类型( MMM 张卡片中不一定包含所有 444 种类型的卡片,见样例),每种类型的卡片上分别标有 1,2,3,41, 2, 3, 41,2,3,4 四个数字之一,表示使用这种卡片后,乌龟棋子将向前爬行相应的格子数
文章浏览阅读1.5k次。吐槽内存泄露 ? 内存暴涨 ? OOM ?首先提一下我自己曾经历过多次内存泄露,到底有几次? 我自己心里悲伤的回想了下,造成线上影响的内存泄露事件有将近5次了,没上线就查出内存暴涨次数可能更多。这次不是最惨,相信也不会是最后的内存的泄露。有人说,内存泄露对于程序员来说,是个好事,也是个坏事。 怎么说? 好事在于,技术又有所长进,经验有所心得…. 毕竟不是所有程序员都写过OOM的服务…. 坏事..._python内存泄露
文章浏览阅读747次。1.sensor typeTYPE_ACCELEROMETER=1 TYPE_MAGNETIC_FIELD=2 (what's value mean at x and z axis)TYPE_ORIENTATION=3TYPE_GYROSCOPE=4 TYPE_LIGHT=5(in )TYPE_PRESSURE=6TYPE_TEMPERATURE=7TYPE_PRO_draft sensor
文章浏览阅读581次。/* * Copyright (c) 2009 湖南师范大学数计院 一心飞翔项目组 * All Right Reserved * * 文件名:matrix.cpp 定义Point、Node、Matrix类的各个方法 * 摘 要:定义矩阵类,包括矩阵的相关信息和方法 * * 作 者:刘 庆 * 修改日期:2009年7月19日21:15:12 **/
文章浏览阅读1.7w次,点赞6次,收藏20次。HTML不再推荐页面中使用框架集,因此HTML5删除了<frameset>、<frame>和<noframes>这三个元素。不过HTML5还保留了<iframe>元素,该元素可以在普通的HTML页面中使用,生成一个行内框架,可以直接放在HTML页面的任意位置。除了指定id、class和style之外,还可以指定如下属性:src 指定一个UR..._iframe allow-top-navigation
文章浏览阅读785次,点赞29次,收藏12次。Zipkin 是 Twitter 的一个开源项目,它基于 Google Dapper 实现,它致力于收集服务的定时数据,以解决微服务架构中的延迟问题,包括数据的收集、存储、查找和展现。我们可以使用它来收集各个服务器上请求链路的跟踪数据,并通过它提供的 REST API 接口来辅助我们查询跟踪数据以实现对分布式系统的监控程序,从而及时地发现系统中出现的延迟升高问题并找出系统性能瓶颈的根源。除了面向开发的 API 接口之外,它也提供了方便的 UI 组件来帮助我们直观的搜索跟踪信息和分析请求链路明细,
文章浏览阅读358次。“随着天网工程的建设,中国已经建成世界上规模最大的视频监控网,摄像头总 数超过2000万个,成为世界上最安全的国家。视频图像及配套数据已经应用在反恐维稳、治安防控、侦查破案、交通行政管理、服务民生等各行业各领域。烁博科技视频安全核心能力:精准智能数据采集能力:在建设之初即以应用需求为导向,开展点位选择、设备选型等布建工作,实现前端采集设备的精细化部署。随需而动的AI数据挖掘能力:让AI所需要的算力、算法、数据、服务都在应用需求的牵引下实现合理的调度,实现解析能力的最大化。完善的数据治理能力:面_2018年8月由于某知名视频监控厂商多款摄像机存在安全漏洞