// 阅读须知:因为我是在描述我从头开始做这个批量打包的一个思路,也就是思考历程,所以大家在阅读过后可能会觉得逻辑有点反,为什么要把绘制放到最后面,我是希望能够帮大家分享一下我的分析思路,仅供参考。
一、插件安装
首先是插件的安装与引入,这里我们用的是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最好是一个绝对路径,如果是相对路径的话,需要借助