在ts+vue中实现前端批量下载打包二维码
// 阅读须知:因为我是在描述我从头开始做这个批量打包的一个思路,也就是思考历程,所以大家在阅读过后可能会觉得逻辑有点反,为什么要把绘制放到最后面,我是希望能够帮大家分享一下我的分析思路,仅供参考。
一、插件安装
首先是插件的安装与引入,这里我们用的是qrcode的这个插件,直接使用npm install qrcodejs2安装即可,但是这里要注意,如果你用的是ts进行开发的话,这时候用传统的import将qrcode引进来是不可取的,他会报错:TS7016: Could not find a declaration file for module 'qrcodejs2'. '/node_modules/qrcodejs2/qrcode.js' implicitly has an 'any' type. Try `npm install @types/qrcodejs2` if it exists or add a new declaration (.d.ts) file containing `declare module 'qrcodejs2';`。这里为什么会出现这个问题,我暂不知道,知道的同学们欢迎留言。不过解决方案的话,我们可以参考这个博客:https://blog.csdn.net/mhbsoft/article/details/92842278,这里博客里面已经说得很详细了。
二、二维码生成
接下来就是插件的使用了,qrcode这个插件的使用,总体来说还是很简单的,它主要是通过获取dom元素,然后通过HTML5 cavans绘制而成的。首先我们需要在html里定义一个放置二维码的dom元素,
<div id="qrcode">
</div>
然后定义一个方法
qrcode(){
let qrcode = new this.QRCode('qrcode', {
width: 272, //图像宽度
height: 272, //图像高度
colorDark: "#000000", //前景色
colorLight: "#ffffff", //背景色
typeNumber: 4,
correctLevel: this.QRCode.CorrectLevel.H //容错级别 容错级别有:(1)QRCode.CorrectLevel.L (2)QRCode.CorrectLevel.M (3)QRCode.CorrectLevel.Q (4)QRCode.CorrectLevel.H
})
qrcode.clear(); //清除二维码
qrcode.makeCode(this.data.url);//生成另一个新的二维码
}
然后在mouted里面调用这个方法,但是有的项目的mouted不起作用,我们还可以这样,
created(){
this.$nextTick(()=>{ // $nextTick是指在页面dom元素都加载完了之后再执行里面的方法,从而也起到了一个mouted的作用。
this.qrcode();
})
}
以上就是我们生成二维码的全过程了。
三、二维码打包以及导出
二维码已经生成好了,接下来就是打包了,打包的话这里用到了两个插件,分别是jsZIP以及FileSaver,这两个一个是将文件整合成压缩包一个是生成对应的文件目录,引入方法和上面引入qrcode是一样的。接下来我们来看下这个打包方法的实现:
function downImg(imgArr,title) { // imgArr是我们要下载的图片列表,title就是你下载出来的压缩包的名称
var zip = new JSZip();
var file_name = '';
for(let i=0;i<imgArr.length;i++) { // 循环我们传进来的图片列表,为每一张图片赋值
let item = imgArr[i].img
let name = imgArr[i].hospital+imgArr[i].department+ imgArr[i].name; // 每一张图片的名字,可以根据自己的规则生成
file_name = title + '.zip'; // 生成的文件的名字
var img = zip.folder(name); // 生成压缩图片
var img_arr = item.split(','); img.file(name + '.png', img_arr[1], {base64: true}); // 生成图片,采用base64格式
}
·zip.generateAsync({type:"blob"}).then(function(content) {
·FileSaver.saveAs(content, file_name); // 生成文件,调用saveAs
·});
}
从上面的代码我们可以看出,我们需要将我们要导出的图片的base64地址拿到,然后才可以调用这个方法,于是接下来我们看怎么将图片转成base64格式。
四、绘制我们需要的图片格式
一般情况下,我们绘制图片的话,直接用cavans将我们需要绘制的dom元素给转成图片,代码如下:
html2canvas(Dom,{ // Dom就是我们要转成图片的页面节点,可以通过id选择器、类选择器或者refs获取
backgroundColor: null
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png"); // 这里调用cavans的toDataURL方法来获取转化后的base64格式的路径
this.dataURL = dataURL; // 赋值出去,这里拿到的dataURL的地址就是一个base64格式的地址了,我们可以用它来直接绘制图片
});
但是,经过我的检测,发现在vue+ts的项目中,他会报错html2cavans这个方法找不到,应该是没有定义这个方法,毕竟ts和js的区别就是ts必须有明确的定义,但是我没有找到有效的声明方法,所以我采用了下面的第二种方法
drawImg(){ // 定义一个方法,来绘制我们要导出的二维码var canvas=document.createElement("canvas"); // 创建一个cavans元素
canvas.width = 510; // 定义cavans宽高,也是我们导出的图片的宽高
canvas.height = 700;
var ctx=canvas.getContext("2d")!; // 定义一个变量来进行cavans的二维绘制
var img= new Image(); // 新建一个图片元素
// 给图片赋值,一般这里是要放绝对路径的,如果找不到绝对路径的话,可以用require的方式来定义,let bgImg = require('../assets/image/bg.png')
img.src = bgImg;
img.onload = ()=>{ // 这里之所以用onload,是要等图片绘制完成了再干其他的事情,否则的话可能出现最后导出的图片没有背景图的情况,因为绘制图片相当于一个异步的过程,踩坑踩坑
ctx.drawImage(img,10,10); // 绘制图片,里面的后两个参数是坐标
ctx.fillStyle="#ffffff"; // 设置填充色,为下面的矩形
ctx.fillRect(114,240,276,276); // 绘制一个矩形,前两个参数是坐标,后两个参数是矩形的宽高 let img2 = new Image();
// 下面我们该将二维码绘制上去了,首先因为二维码是我们借助qrcode生成的,所以我们需要获取到生成的二维码的src,但是我暂时还没有找到方法获取qrcode生成的二维码的路径,所以只能采用下方的这种方式,因为qrcode其实已经将生成的二维码绘制到页面上指定的标签里面了,
// 所以我们可以通过去寻找生成的img元素,并且通过cas.toDataURL的方法去获取相应的路径。
let cas:any = document.querySelector('#qrcode')!.children[this.index*2];
var data1 = cas.toDataURL('image/jpg');
img2.src = data1;
img2.onload = ()=>{ // 这里同样是避免异步
ctx.drawImage(img2,115,242);
ctx.font="30px PingFangSC-Semibold"; // 这里是绘制文字
ctx.fillStyle = '#1C3063'; // 文字颜色
ctx.textAlign='center'; // 设置文字的位置,居中还是左右对齐,居中对齐的中心位置就是下面设置的坐标,同理,左右对齐的相对位置也是以下方的坐标为准的
ctx.fillText(this.data.name!+' '+this.data.position!,255,600); // 设置文字的内容,第一个参数是文字容,第二三个参数是坐标
let dependce = this.data.hospital!+' '+this.data.department!;
if(dependce){ // 这里是做了一个如果文字超过18个字,就开始换行,并且仍旧是居中对齐
if(dependce.length >10){
ctx.font="26px PingFangSC-Semibold";
ctx.fillStyle = '#1C3063';
ctx.textAlign='center';
ctx.fillText(dependce.slice(0,18)!,255,650); ctx.font="26px PingFangSC-Semibold";
ctx.fillStyle = '#1C3063';
ctx.textAlign='center';
ctx.fillText(dependce.slice(18)!,255,678); // 这个坐标点的位置也需要重新计算
}else{
ctx.font="26px PingFangSC-Semibold";
ctx.fillStyle = '#1C3063';
ctx.textAlign='center';
ctx.fillText(dependce,255,650);
}
}
let data = canvas.toDataURL(); // 这里其实我们的图就画好了,接下来就是根据自己的代码逻辑进行操作了。
// 这里是将我们需要的一些参数尤其是生成的图片放到一个数组中去,然后传递到父级。
this.exportArr.push({hospital: this.data.hospital!,department:this.data.department!,name:this.data.name!,img:data});
this.$emit('exportArr',this.exportArr);// 如果不需要向父组件传值的话,可以省略
}
} }
经过上面的方法,我们其实就可以拿到绘制好的图片的base64格式了,我们就可以执行上面的导出过程了。
// 给图片元素赋值,这里的bgImg最好是一个绝对路径,如果是相对路径的话,需要借助
在ts+vue中实现前端批量下载打包二维码的更多相关文章
- Java中使用google.zxing快捷生成二维码(附工具类源码)
移动互联网时代,基于手机端的各种活动扫码和收付款码层出不穷:那我们如何在Java中生成自己想要的二维码呢?下面就来讲讲在Java开发中使用 google.zxing 生成二维码. 一般情况下,Java ...
- vue常用插件之打印功能、二维码插件、批量打印二维码
vue实现打印的两种方法 vue实现批量打印二维码 (需安装二维码插件qrcodejs2) 一.vue-print-nb插件 1.安装: npm i vue-print-nb -S 2.全局注册(ma ...
- Laravel5中通过SimpleQrCode扩展包生成二维码实例
Simple Qrcode是基于强大的Bacon/BaconQrCode库开发的针对Laravel框架的封装版本,用于在Laravel中为生成二维码提供接口. 安装SimpleQrCode扩展包 在项 ...
- 前端QRCode.js生成二维码(解决长字符串模块和报错问题)
QRCode 用法 1.使用npm安装到你的项目中 npm install qrcode2 --save 使用commonjs或者es6模块方式导入 var QRCode = require('qrc ...
- Vue中将网址、动态网址转为二维码
1. 首先需要安装相关的依赖包 npm install qrcodejs2 --save 或者 npm install qrcode2 --save 这里选择第二种方式进行安装,如图: 2.templ ...
- 前端用网址生成二维码(jquery)
1.加载jquery.qrcode.min.js 2.html部分: 3.js部分:url为生成二维码的网址 附: jquery.qrcode.min.js下载 链接:https://pan.baid ...
- Vue前端利用qrcode生成二维码
<div id="qrcode" style="width: 560px;height: 560px;background-color: white;"& ...
- 草料生成app自动下载的二维码
草料官网http://cli.im/app 填写iOS和安卓的appid就好了
- (转: daifubing的博客 )Delphi二维码中文支持、分组、批量打印经验小结
一直也没接触到什么复杂的报表,都是一些简单的报表,在DelphI下使用QuickReport一般也就能满足需要了,由于公司现在需求的变化,对条码扫描提出了新的要求,主要是扫码要包含更多地内容,以前的一 ...
随机推荐
- 简单了解HashCode()
在java的内部类中,计算HashCode通常使用 code = 元素* 31 + 下一个元素 以String为例 public int hashCode() { int h = hash; if ( ...
- 零基础搭建appium自动化环境
目录 1.关键概念 2.安装过程 2.1.安装nodejs 2.2.安装appium 2.3.安装Android SDK 2.4.安装模拟器 2.5.安装Python3 2.6.安装appium Cl ...
- Spring Boot2(四):使用Spring Boot多数据源实现读写分离
前言 实际业务场景中,不可能只有一个库,所以就有了分库分表,多数据源的出现.实现了读写分离,主库负责增改删,从库负责查询.这篇文章将实现Spring Boot如何实现多数据源,动态数据源切换,读写分离 ...
- AIX/Linux/HP-UX查看CPU/内存/磁盘/存储命令
1.1 硬件环境验证方式 硬件环境主要包括CPU.内存.磁盘/存储.网络设备(如F5等).系统特有设备(如密押设备等)等,其中网络设备和系统特有设备由网络管理员或项目组提供为准,本节主要关注CP ...
- 【docker学习一】CentOS7.5+Docker安装及使用「安装、查看、pull、创建、进入镜像」
记录安装配置以及使用的过程,可能会有多处摘抄,已注明照抄地址,侵删. 是什么:个人理解,是一种移植性很强的虚拟机,支持版本控制(类似于git),同一个服务器可以运行多个docker容器,每个docke ...
- 转载 make版MYsql 5.5.13
使用cmake安装mysql5.5.132014-04-09 12:59:42 分类: Mysql/postgreSQL 原文地址:使用cmake安装mysql5.5.13 作者:isqlw 安装cm ...
- PATA 1009. Product of Polynomials (25)
1009. Product of Polynomials (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...
- Python静态方法,其实暗藏玄机
文章首发于 微信公众号:Python编程时光 这个标题「静态方法其实暗藏玄机」其实只是该文章的一个知识点.或许有些标题党,但没有关系,我相信有不少人对此并没有深入研究他们,不信我问你三个问题,你看能否 ...
- Codeforces 1133E - K Balanced Teams - [DP]
题目链接:https://codeforces.com/contest/1133/problem/C 题意: 给出 $n$ 个数,选取其中若干个数分别组成 $k$ 组,要求每组内最大值与最小值的差值不 ...
- black box黑盒测试
软件规格说明书 等价类划分,完备性,无冗余性(不能有交集). 健壮等价类:无效等价类 边界值分析,对于一个含有n个变量的程序,采用边界值分析法测试程序会产生4n+1个测试用例 ...