vue+element表格 前端自己实现导出Excel 表格

需求就是点击导出按钮 导出当前表格的内容 导出一个excel文档

1.首先先画一个表格 这个表格是我们自己封装的组件 当然你也可以封装一个 或者使用element 上的表格 这里的cloums代表我的表格的每一列  记得在data中定义 cloumns:[ ]

  <CMtable v-if="tableFlag" ref="table" :data="tableDataCurrent" :columns="columns" />

 2.npm install -s xlsx 安装xlsl插件 这里可以封装成一个全局方法 utils-index.js中引入

import XLSX from 'xlsx'

// 导出表格excel
export function exportTableExcel(tableTitleArray, tableDataArray, fileName) {
  const _fileName = fileName || 'defalut'
  const tableData = [tableTitleArray].concat(tableDataArray)
  const ws = XLSX.utils.aoa_to_sheet(tableData)
  /* generate workbook and add the worksheet */
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  /* save to file */
  XLSX.writeFile(wb, `${_fileName}.xlsx`)
}

封装完就可以在 需要的页面引入

import { exportTableExcel } from '@/utils'

3.接下来写导出的点击事件

getExcel() {
      const tableTitle = []
      const tableProp = []
      const tableData = []
      this.columns.forEach((item) => {
        if (item.checked) {
          tableTitle.push(item.label2 ? item.label2 : item.label)
          tableProp.push(item.prop)
        }
      })
      this.tableData.map(item => {
        tableData.push((function() {
          var arr = []
          tableProp.forEach((e) => {
            arr.push(item[e])
          })
          return arr
        })())
      })
      exportTableExcel(tableTitle, tableData, '集群卷信息')
    },

 

因为我是搜索后出表格 所以我的cloums在搜索里面赋值 你也可以在data中

 

就可以啦 

这里如果看不懂的话 可以看一下示例 这是别人的 页签就是我代码中所写的 sheet1

 

得到的结果如下