vue 导出el-table表格数据

1.先安装  file-saver 、xlsx 组件

npm install file-saver -S

npm intsall xlsx -S

2.html 代码

<el-table :data="elTable" ref="" id="table-content">
    <el-table-column label="其他"  align="center"></el-table-column>

    ......


</el-table>


 <el-button type="primary"  @click="exportExcel">导出 Excel</el-button>

3. js 方法

<script>
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
export default {
    data() {
        return {elTable:[]}
    },
    methods:{
        /**
         * 导出表格数据
         * @returns {any}
         */
        exportExcel() {
          const et = XLSX.utils.table_to_book(document.getElementById('table-content'))
          // 此处传入table元素节点，XLSX.utils.table_to_book对传入的数据进行加工，赋值给et
          // XLSX.write() 开始编写Excel表格
          const etout = XLSX.write(et, {
            bookType: 'xlsx', bookSST: true, type: 'array'
          })
          try {
            FileSaver.saveAs(new Blob([etout], {
              type: 'application/octet-stream'
            }), '导出表格名称.xlsx')
          } catch (e) {
            this.$message.error('导出失败')
          }
          return etout
        },
    }
}


</script>

有不同见解的伙伴可以，一起探讨！