把el-table 转换成excel,v-chart 转换成png 批量放一个文件夹压缩下载

要求：把页面所有的el-table和所有的v-chart图片压缩成一个zip下载，

依赖 ：

1.file-saver（文件不压缩直接下载使用到，如果使用压缩下载，不需要）

2. xlsx（把el-table转换成excel）

3.jszip(把文件转换成zip下载)

1.首先下载单个文件：exportFile.js导入需要使用到的页面。

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

function exportFile(type,idName,fileName) {
   //type区别是table还是v-chart;idName为表格或者v-charts的id;fileName为下载之后的文件名称
//下载表格
 if(type=='table'){
   let tables = document.getElementById(idName)
   if(tables.querySelector(".el-table__fixed")){
   //解决如果有表格使用了fixed固定列属性会导致导出两个重复的表格，
     tables=tables.cloneNode(true);
     tables.removeChild(tables.querySelector(".el-table__fixed"))
   }
   let table_book = XLSX.utils.table_to_book(tables, {raw: true});
   var table_write = XLSX.write(table_book, {
     bookType: "xlsx",
     bookSST: true,
     type: "array",
   });
   try {
    FileSaver.saveAs(//下载
       new Blob([table_write], {type: "application/octet-stream"}),
       `${fileName}.xlsx`
     );
   } catch (e) {
     if (typeof console !== "undefined") console.log(e, table_write);
   }
   return table_write;
 }else if(type=='charts'){
//下载v-chart
   if (typeof Blob !== 'function') {
     return
   }
   let canvas = document.getElementById(idName).getElementsByTagName('canvas')[0]
   try {
     canvas.toBlob((blob) => {
      FileSaver.saveAs(//下载
         blob,
         `${fileName}.png`
       )
     })
   } catch (e) {
     console.error(e)
   }
 }
}
export default exportFile

2.批量下载

遇到的bug:可以单独批量下载v-chart 或者el-table,但是如果同时批量下载v-chart和el-table就会出现el-table可以完整下载，v-chart只能下载了一部分的问题，

猜测是file-saver依赖的问题。只能单独批量下载v-chart图片，或者单独批量下载el-table

3.批量压缩下载

由于批量下载，会导致下载文件太多了，所以使用批量压缩下载，这样可以完美避开了第二点下载不完整的问题。

this.tableFileList=[  ]   this.chartFileList=[   ]

transformCharts(type,idName,fileName) {
   //type,idName,fileName同上
  if(type=='table'){
    let obj={}
    let tables = document.getElementById(idName)
    if(tables.querySelector(".el-table__fixed")){
   //固定列导致导出两个重复的表格
      tables=tables.cloneNode(true);
      tables.removeChild(tables.querySelector(".el-table__fixed"))
    }
    let table_book = this.$XLSX.utils.table_to_book(tables, {raw: true});
    var table_write = this.$XLSX.write(table_book, {
      bookType: "xlsx",
      bookSST: true,
      type: "array",
    });
    obj.fileName=fileName
    obj.fileData=table_write
    this.tableFileList.push(obj)
  }else if(type=='charts'){
    let obj={}
    if (typeof Blob !== 'function') {
      this.$alert('您的浏览器不支持！请使用最新版本chrome/firefox浏览器!')
      return
    }
    const canvas = document.getElementById(idName).getElementsByTagName('canvas')[0]
    //这里使用canvas.toBlob转成二进制流下载打开为空，不知道为啥，所以最后canvas.toDataURL转成base64处理
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    obj.fileName=fileName
    obj.fileData=image.src
    this.chartFileList.push(obj)
  }

  if(this.tableFileList.length==8&&this.chartFileList.length==9){
   // 只有当全部图片表格都存储完毕才开始下载
   let zip = new JSZip();//创建压缩包
    //把excel加入zip文件
    this.tableFileList.forEach(item=>{
      zip.file(item.fileName+".xlsx", item.fileData);//把文件加入zip包中
    })
    //把png加入zip文件
    this.chartFileList.forEach(item=>{
      zip.file(item.fileName+".png", item.fileData.split(',')[1],{base64: true});//把图片加入zip包中，这里必须写上base64 为true，必须把base64文件逗号前面的都截掉，否则会下载失败
    })
    zip.generateAsync({type:"blob"})
      .then(function(content) {
        saveAs(content, "压缩包名称.zip");//最后导出
      });
  }
},