zoukankan      html  css  js  c++  java
  • 解决ElementUI中el-table数据导出Excel数据重复两遍的问题

    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
        },
  • 相关阅读:
    Python 元类
    Rsync 基础配置
    linux shell find
    找最大的目录
    云主机的上下行带宽
    关于c3p0 ResourcePoolException: Attempted to use a closed or broken resource pool
    recover_file
    MegaCli 监控raid状态
    influxdb
    在Ubuntu 16.04如何安装Java使用apt-get的
  • 原文地址:https://www.cnblogs.com/zhangyezi/p/13532003.html
Copyright © 2011-2022 走看看