• vue+elementUI,eltable 数据导出Excel


    1. 安装依赖
    //xlsx 与 file-saver依赖
    npm install --save xlsx file-saver
    
    2.在需要的组件中引入
    import FileSaver from 'file-saver'
    import * AS XLSX from 'xlsx'
    
    <el-table :data="checkOrderList" border id="out-table">
    //表格内容
    
    </el-table>
    
    <el-button type="primary" @click="exportExcel">点击导出</el-button>
    
    4.methods中引入方法
    exportExcel (id,title) {
      /* generate workbook object from table */
    
      var wb = XLSX.utils.table_to_book(document.querySelector(#out-table))
    
      /* get binary string as output */
    
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
    
       try {
    
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), title+'.xlsx')
    
       } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
    
       return wbout
    
    }
    
    5.重复数据问题和分页
    若是表格有固定在页面右侧的列,需要去掉fixed效果,选择器是.el-table__fixed-right,再到后面append上去;若是表格有固定表头,选择器是.el-table__fixed,不然会导致数据导出两遍。
    若是表格有分页,我把表格的不分页的全部数据拿到(pageSize设置一个很大的数,如:1000000),在点击导出时将数据渲染到需要导出数据的表格中,等到导出完成后,再把之前的分页数据换过来。
    解决方法:
    
    exportExcel() {
                const data = this.checkOrderList
    
                this.checkOrderList = this.allCheckOrderList // 把不分页的所有数据都渲染到表格中
    
                const fix = document.querySelector('.el-table__fixed')
    
                let wb
    
                this.$nextTick(() => {
    
                    if (fix) { // 判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去
    
                        wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix))
    
                        document.querySelector('#out-table').appendChild(fix)
    
                    } else {
    
                        wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
    
                    }
    
                    const 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)
    
                    }
    
                    this.checkOrderList = data // 恢复表格的分页数据
    
                    return wbout
    
                })
    
            },
  • 相关阅读:
    java中this关键字
    java继承
    java super关键字
    java String类型存储详解
    java四种访问权限修饰符
    C/C++语言void及void指针深层探索【转】
    Linux Epoll介绍和程序实例【转】http://blog.csdn.net/sparkliang/article/details/4770655
    服务器与wp7的socket通信【转】 http://www.cnblogs.com/linzheng/archive/2011/06/21/2086456.html
    android关于socket编程,以聊天为例【转】http://hi.baidu.com/yaoyuanhuajx/item/9b93d7565f315ba9acc857d7
    Tesseract 3 语言数据的训练方法【转】http://blog.csdn.net/dragoo1/article/details/8439373
  • 原文地址:https://www.cnblogs.com/tszr/p/16330589.html
Copyright © 2020-2023  润新知