js/vue 生成echarts图片并打包zip下载

**js/vue 生成echarts图片并打包zip下载**
选择已存在多张echarts图打包到zip并下载
获取echarts图表base64编码并弹窗显示，可以多选。

echarts、ivew使用这里略过...

需要安装组件
运行：
npm install file-saver --save
npm i jszip -S  or  npm install jszip // 安装jszip

代码：
 页面

 <template>
  <div>
    <div class="export"><Button type="text" @click="imgmodal = true">导出</Button></div>
    
    <div class="con">
      <div ref="chart1"></div>
      <div ref="chart2"></div>
      <div ref="chart3"></div>
    </div>
    <Modal title="选择导出图表" ok-text="导出" @on-ok="exportword" v-model="imgmodal"  :styles="{top: '10px',width:'1200px'}">
          <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
            <Checkbox
                :indeterminate="indeterminate"
                :value="checkAll"
                @click.prevent.native="handleCheckAll">全选</Checkbox>
        </div>
          <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
           <div class="conv">
                <div :key="index" v-for="(item,index) in imgarry">
                  <Checkbox :label="item.name" border>
                    <img :src="item.imgurl" alt="">
                  </Checkbox>
                </div>
          </div>
          </CheckboxGroup>
    
    </Modal>
  </div>
</template>

<script>
import exportimgtozip from "@/views/utils/exportimgtozip";
var imgzip = exportimgtozip;
var echarts = require("echarts");
export default {
  data() {
    return {
      imgmodal: false,
      imgarry:[],
      checkAllGroup: [],
      indeterminate: false,
      checkAll: false,
    };
  },
  //事件挂载后
  mounted() {
   
  },
  methods: {
    exportword(){
      let self = this;
      let Title='图表统计';
      let arry=[];
      //let arry=[{name:"文件名",baseImg:'图片base64'}];
      self.imgarry.forEach(item=>{
            if(self.checkAllGroup.indexOf(item.name)>-1){
              arry.push({name:item.name,baseImg:item.imgurl});
            }
      });
      //调用打包方法
      imgzip.methods.saveEcahrtimgToZip(arry,Title);
      
    },
    handleCheckAll () {
       let self = this;
        if (self.indeterminate) {
            self.checkAll = false;
        } else {
            self.checkAll = !self.checkAll;
        }
        self.indeterminate = false;

        if (self.checkAll) {
          let arry=[];
            self.imgarry.forEach(item=>{
                  arry.push(item.name);
            });
            self.checkAllGroup = arry;
        } else {
            self.checkAllGroup = [];
        }
    },
    checkAllGroupChange (data) {
       let self = this;
        if (data.length === self.imgarry.length) {
            self.indeterminate = false;
            self.checkAll = true;
        } else if (data.length > 0) {
            self.indeterminate = true;
            self.checkAll = false;
        } else {
            self.indeterminate = false;
            self.checkAll = false;
        }
    },
    charts01(res) {
     
      let option = {
        ........
      };
      self.mychart1 = echarts.init(self.$refs.chart1);
      self.mychart1.setOption(option);
      //echarts动态图加载需要加延迟，或关闭动画效果，否则生成图片不完整
      this.$nextTick(()=>{
        setTimeout(()=>{
          let url=self.mychart1.getConnectedDataURL();
          let text=self.mychart1.getOption().title[0].text;
          if(!text)text='未找到标题_mychart1';
          self.imgarry.push({'name':text,'imgurl':url});
        },1500);
        
      });
      
      window.addEventListener("resize", function() {
        self.mychart1.resize();
      });
    },
    charts02(res) {
    ........
    },
    charts03(res) {
    .........
    },

  }
};
</script>

<style>
.con {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.con > div {
  width: 50%;
  height: 400px;
  /* background: #f1f1f1;
  border: 1px solid #e2edfb; */
  text-align: center;
  line-height: 400px;
  margin-bottom: 16px;
}
.conv {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.conv > div {
  width: 50%;
  height: 400px;
  /* background: #f1f1f1;
  border: 1px solid #e2edfb; */
  text-align: center;
  line-height: 400px;
  margin-bottom: 16px;
}
.conv .ivu-checkbox {
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
    position: relative;
    float:left;
}
.conv .ivu-checkbox-group-item {
    display: inline-block;
    height: 100%;
    width: 100%;
}
.export{
  float:right;
}
</style>


exportimgtozip.vue页面:
<template>
  
</template>

<script>
import JSZip from "jszip";
import FileSaver from "file-saver";
export default {
  data() {
    return {
      data: []
    };
  },
  //事件挂载后
  mounted() {
    
  },
  methods: {
      let arry=[{name:"文件名",baseImg:'图片base64'}]; let imgtitle='zipfilename'
    saveEcahrtimgToZip(arr, imgtitle) {
        var zip = new JSZip();
        var imgs = zip.folder(imgtitle);
        var baseList = [];
        for (var i = 0; i < arr.length; i++) {
            let name = arr[i].name; //图片名称
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL(); // 得到图片的base64编码数据 let url =
            canvas.toDataURL("image/png");
            baseList.push({ name: name, img: url.substring(22) });//去掉data:image/png;base64
            if (baseList.length == arr.length) {
                if (baseList.length > 0) {
                //this.$Message.info("开始下载....");
                for (let k = 0; k < baseList.length; k++) {
                    imgs.file(baseList[k].name + ".png", baseList[k].img, {
                    base64: true
                    });
                }
                zip.generateAsync({ type: "blob" }).then(function(content) {
                    FileSaver.saveAs(content, imgtitle + ".zip");
                });
                } else {
                    alert("下载图片错误,请联系管理员!!");
                }
            }
            };
            image.src = arr[i].baseImg;
        }
        }
  }
};
</script>

<style lang="scss" scoped>

</style>