jszip + file-saver 纯前端批量下载

纯前端批量下载

前言

稍早之前，用canvas 批量生产二维码，是支持单个下载的。现在需要优化一下，添加批量下载全部的二维码。

需求：添加按钮批量下载所有的二维码，并且以xxx.zip 命名，图片以xxx.png命名。

拿到这个需求的时候，前端页面已经生成二维码了。而且是base64格式的。后端虽然也可以处理，但数量一大，接口比较缓慢。所以前端处理比较好。??

思路

1.生成一个文件夹，存放图片文件流
2.生产一个压缩包

JSzip

我这里用的是npm安装

https://www.npmjs.com/package/jszip

 npm install jszip

yarn 用户的话：

yarn add jszip

file-saver

https://www.npmjs.com/package/file-saver

npm install file-saver --save

具体代码

批量下载，打包成xxx.zip

import JSZip from 'jszip'
/* eslint-disable */
// require('script-loader!file-saver')
import { saveAs } from 'file-saver'
import { debounce } from '@/utils'

methods:{
 // debounce 防止暴击
 allDownLoad: debounce(function() {
      const zip = new JSZip()
      const img = zip.folder(`文件夹名字`);
      this.list.forEach(function (obj) {
        // base64Str 是  data:image/png;base64,ifjskfixvfdsf..fd 格式的
        // 去掉 data:image/png;base64,
        let base64Data  = obj.base64Str.substring(22)
          img.file( `图片名.png`, base64Data ,{base64: true});
        });
        
        zip.generateAsync({type:"blob"}).then((content)=> {
          //  FileSaver.js  功能
          saveAs(content, `压缩包名字.zip`);
      });
    }, 300)
}

当图片是一个url的情况下，我们可以用 canvas.toDataUrl 转换成base64格式，然后继续结合上面👆的方式，在获取base64数据的时候调用下。

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

//网络url 转 base64
    getBase64Image(url) {
      return new Promise((resolve) => {
        let timeStamp = new Date().getTime();
        let img = new Image();
        img.src = `${url}?${timeStamp}`;  // 处理缓存 报错问题
        // img.crossOrigin = 'Anonymous'; // 打开时候直接跨域，待研究。🐶
        let ext = img.src.substring(img.src.lastIndexOf('.')+1).toLowerCase(); //获取后缀
        img.onload = function () {
          //要先确保图片完整获取到，这是个异步事件
          var canvas = document.createElement('canvas'); //创建canvas元素
          canvas.width = img.width;
          canvas.height = img.height;
          canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
          //转换图片为dataURL
          let base64Data = canvas.toDataURL(`image/${ext}`)
          console.log('a--->',base64Data);
          resolve({base64Data});
        };
      });
    },

axios返回blod格式，并保存。

handleDownload() {
    this.$axios.downloadTemplate({}, {
        responseType: "blob" //  返回类型
    }).then(res => {
        saveAs(res.data)
    })
},

参考文章：

https://www.npmjs.com/package/jszip

https://www.npmjs.com/package/file-saver

https://www.zhangxinxu.com/wordpress/2019/08/js-zip-download/

https://blog.csdn.net/i_am_a_div/article/details/126242541

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL