热搜:m1 nginx 代理 前端

excel导入导出功能实现

2024-02-22 00:43:21

插件导出流程:

创建一个工作簿

创建一个工作表

把工作表加入到工作簿中

调用插件方法导出

excel导入导出功能实现 1

npm i --save https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz

demo实现

import { utils, writeFileXLSX } from 'xlsx'

exportToExcel() {
  // 创建一个新的工作簿
  const workbook = utils.book_new()
  // 创建一个工作表 要求一个对象数组格式
  const worksheet = utils.json_to_sheet(
    [
      { name: '张三', age: 18 },
      { name: '李四', age: 28 }
    ]
  )
 
  // 把工作表添加到工作簿  Data为工作表名称
  utils.book_append_sheet(workbook, worksheet, 'Data')
  // 改写表头
  utils.sheet_add_aoa(worksheet, [['姓名', '年龄']], { origin: 'A1' })
  // 导出方法进行导出
  writeFileXLSX(workbook, 'SheetJSVueAoO.xlsx')
}

具体sheetjs文档


随便写一个方法对调一下后端返回位置

// 以excel表格的顺序调整后端数据
  const sheetData = res.data.rows.map((item) => {
    const obj = {}
    tableHeaderKeys.forEach(key => {
      obj[key] = item[key]
    })
    return obj
  })