在ts+vue中实现前端批量下载打包二维码

inkwind 2019-07-29 原文

—恢复内容开始—

一、插件安装

　　首先是插件的安装与引入，这里我们用的是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
  ·});
}