纯前端5行代码实现表格下载导出

由于表格字段是动态的，后端说不好实现导出，于是前端实现。利用xlsx包，后台返回的表格数据是对象数组，利用XLSX.utils.json_to_sheet(tableData1.value),不用改变数据结构，只要5行代码就可以实现导出。

第一行代码 引入XLSX

import * as XLSX from 'xlsx/xlsx.mjs'

第2-5行代码 实现导出.xlsx

创建 worksheet，创建 workbook ，导出

// 导出方法
const handleExport = () => {
  /* 创建 worksheet tableData1.value 是表格数据 */
  const ws = XLSX.utils.json_to_sheet(tableData1.value)
  /* 创建 workbook 导出 */
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  XLSX.writeFile(wb, '异常数据详情.xlsx')
}

// 后台返回的表格数据结构

[  {    "ADD_TIME": "2023-11-14 11:19:06.0",    "ID": 1,    "NAME": "test1"  },  {    "ADD_TIME": "2023-11-14 11:19:09.0",    "ID": 2,    "NAME": "test2"  }]

导出后打开表格 没问题

参考文档

在网上找资料，发现写了很多，还有用到FileSaver.js实现导出的，于是决定看下官网，看下具体实现方法，最后发现只要5行代码就能实现导出表格。