1、安装依赖(npm不行的话用cnpm)

npm install --save xlsx file-saver

【vue】vue中element表格导出为excel表格_excel

2、在js引入头文件

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

【vue】vue中element表格导出为excel表格_poi_02
3、在methods中添加导出函数

exportExcel () {
            /* out-table关联导出的dom节点  */
            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' }), '设备台账.xlsx')
            } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
            return wbout
        },

【vue】vue中element表格导出为excel表格_poi_03

4、添加导出按钮

<el-button icon="el-icon-download" @click="exportExcel">导出</el-button>

【vue】vue中element表格导出为excel表格_vue_04

5、测试
【vue】vue中element表格导出为excel表格_excel_05