如何在Vue中将数据导出成Excel

如何在Vue中将数据导出成Excel

1.下载xlsx插件

$ npm install xlsx 
$ npm i xlsx -S

2.在组件中调用该插件

// 在调用的组件中引入（全局引入在这里无法调用）
import XLSX from 'xlsx'

data () {
    return {
      // 列表数据
      tableData: [],
      // 导出Excel数据
      data: [
        ['id', 'name', 'value'],
        [1, 'sheetjs', 7262],
        [2, 'js-xlsx', 6969]
      ]
    }
},
methods： {
  // 处理EXCEL数据，该方法挂载到请求列表数据的回调函数中
  makeExcelData () {
    const excelTite = [
      'ID',
      '标题',
      '作者',
      '描述',
      '封面',
      '创建时间',
      '阅读次数',
      '详细内容'
    ]
    this.data = [excelTite]
    this.tableData.forEach((art) => {
    this.data.push(Object.values(art))
    })    
  },
  // 导出EXCEL数据
  exportExcel () {
    // 处理数据
    const worksheet = XLSX.utils.aoa_to_sheet(this.data)
    const workbook = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(workbook, worksheet, 'SheetJS')
    // 导出的excel表的名字
    XLSX.writeFile(workbook, '自定义名字.xlsx')
  }
}

3.将exportExcel方法挂载到一个事件上后就行了