解決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
    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM