DOM转成图片，图片打包成压缩包下载

效果如下：

1.首先需要俩个插件
dom-to-image 将DOM转成图片

npm install --save dom-to-image

jszip 打包成压缩包

npm install --save jszip  

在页面引入

import JSZip from "jszip";
import domtoimage from "dom-to-image";

先拿到想要的DOM 或者document.getElementById() 这里我是VUE页面 this.$refs.growBox

DOM转图片 ：

  domtoimage.toPng(this.$refs.growBox).then((dataUrl) => {
    var newUrl = dataUrl.slice(22);
    // 必须把base64的头给去掉才能转成图片，不然后面使用jszip插件的时候，插件会检测到该数据是一个文件路径而导致报错
    console.log(newUrl);
    var base64Arr = [];
    var obj =  { name: "第一张图片", base64: newUrl }
    // obj 一个对象一张图片  name 文件名
    base64Arr.push(obj);
    // 当数据保存完之后，开始执行打包压缩方法
    this.dataJSzip(base64Arr);
  });

打包：

    dataJSzip(base64Arr) {
      var zip = new JSZip();
      // 遍历数据
      base64Arr.map((obj) => {
        // 往zip包里面不断塞png文件，使用上面保存的 name 作为文件名
        // 后面的 { base64: true } 记得设置，意思为允许 base64 的数据
        zip.file(`${obj.name}.png`, obj.base64, { base64: true });
        // 更改文件名后缀可以更换图片格式 .jpg
      });
      zip.generateAsync({type: "blob" }) .then((content)=> {
          // 下载后的压缩包文件名
          var filename = `批量下载.zip`;
          // 创建的可下载链接
          var eleLink = document.createElement("a");
          // 往 body 加入 a 标签
          document.body.appendChild(eleLink);
          eleLink.download = filename;
          // 下载内容转变成blob地址
          eleLink.href = URL.createObjectURL(content);
          // 触发点击
          eleLink.click();
          // 然后移除
          document.body.removeChild(eleLink);
        });
    },