vue teble 导出 excel 表格

❝

在公司项目中需要将 table 表格中的数据导出成 excel 表格,我用到了一个插件 「js-export-excel」

❞

环境简介

• vue + ant-design
• ant-design 的 table 组件
• 需要导出 table 表格当前页的 excel 表格

js-export-excel 的介绍

安装

npm install js-export-excel

使用

import ExportJsonExcel from 'js-export-excel'
...
// 导出 excel 表格
excelExport() {
    let option = {}
    // this.columns 是设置渲染表格的结构
    let sheetHeader = this.columns.map(item => item.title)
    let sheetFilter = this.columns.map(item => item.dataIndex)
    let sheetData = this.data // 表格的源数据
    option.fileName = 'excel'// excel的文件名
    option.datas = [
      {
        sheetData: sheetData, // 具体的数据
        sheetName: 'sheet',  // 当前 excel 对应的栏名字
        sheetFilter: sheetFilter,// 设置表头对应的数据
        sheetHeader: sheetHeader,// 设置表头
        columnWidths: [20, 20, 20, 20, 20, 20, 20, 20]
      }
    ]
    var toExcel = new ExportJsonExcel(option) 
    toExcel.saveExcel() // 导出
  },

举例

import ExportJsonExcel from 'js-export-excel'
...
// 导出 excel 表格
excelExport() {
      var option = {}
      option.fileName = 'excel'
      option.datas = [
        {
          sheetData: [
            { key1: '一行一列', key2: '一行二列' },
            { key1: '二行一列', key2: '二行二列' }
          ],
          sheetName: '这是excel下面的分栏名称',
          sheetFilter: ['key1', 'key2'],
          sheetHeader: ['表头1', '表头2'],
          columnWidths: [20, 20]
        }
      ]
      var toExcel = new ExportJsonExcel(option) 
      toExcel.saveExcel()
  },

导出的结果：

更多文档

更多文档请参考 js-export-excel^[1]

Reference