在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最好是一个绝对路径，如果是相对路径的话，需要借助