1. vue2.0 + element UI 中 el-table 数据导出Excel前端实现起来很容易,这里推荐一篇博文链接(vue2.0 + element UI 中 el-table 数据导出Excel ),就不多做说明了;照着这个方法是可以实现表格导出功能的,但是导出的Excel有时候确会出现BUG,那就是导出的内容是重复的2遍,效果如下图,这是为什么呢?

2.罪魁祸首是: 我使用了el-table的fixed属性来让某一列固定,但elementui的实现方式是:创建了两个tabledom,通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出,导致数据重复,审查元素如下:
在这里插入图片描述
3.解决方法:

   exportExc(){
      let fix = document.querySelector('.el-table__fixed');
      let wb;
      if(fix){ //判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去
        wb = XLSX.utils.table_to_book(document.querySelector('#table').removeChild(fix));
        document.querySelector('#table').appendChild(fix);
      }else{
        wb = XLSX.utils.table_to_book(document.querySelector('#table'));
      }
      let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '抄表功能.xlsx')
      } catch (e) { 
          if (typeof console !== 'undefined') console.log(e, wbout) 
      }
      return wbout
    },
Logo

前往低代码交流专区

更多推荐