1. 装置依赖

//xlsx 与 file-saver依赖npm install --save xlsx file-saver`

https://github.com/SheetJS/js-xlsx
https://github.com/eligrey/FileSaver.js

2.在须要的组件中引入

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

3. .vue：

<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            })        },