前端知识分享——SheetJS 用法体验

使用SheetJS导出 Excel 表格

Write and share what I see and hear

最近遇到一个很好用的前端导出Excel 表格的工具 – SheetJS
官方地址
github地址

官方提供了多种版本，自己做点小demo可以使用社区免费版本

使用方法

具体使用方法在官方文档中有很详细的说明，这里举个例子

安装

npm install xlsx

引入

import xlsx from 'xlsx'

使用

// 1. 创建一个工作簿 workbook
  const workBook = xlsx.utils.book_new()
  // 2. 创建工作表 worksheet
  const workSheet = xlsx.utils.json_to_sheet([
  {
      id: 1, name: '张三', age: 16
    },
    {
      id: 2, name: '李四', age: 18
    },
    {
      id: 3, name: '王五', age: 20
    }
])
  // 3. 将工作表放入工作簿中
  xlsx.utils.book_append_sheet(workBook, workSheet)
  // 4. 生成数据保存
  xlsx.writeFile(workBook, `测试.xlsx`, {
    bookType: 'xlsx'
  })

通过以上步骤，即可得到一个excel表格

优化

修改表头

• 定义表头对应的字段

const header = {
  id: '编号', name: '姓名', age: '年龄'
}

• 处理数据

list = list.map(item => {
  const obj = {}
  for (const key in item) {
    if (header[key]) {
      obj[header[key]] = item[key]
    } else {
      obj[key] = item[key]
    }
  }
  return obj
})

对比上面的使用方法将数据放入工作表

// 2. 创建工作表 worksheet
const workSheet = xlsx.utils.json_to_sheet(list)

通过以上操作，即可得到一个拥有直观表头的excel表格

复用

上面的方法每次使用都需要重新手动引入js，还需要再写一遍使用过程，稍微有些麻烦，下面封装一个可直接复用的方法

• js用法

import xlsx from 'xlsx'

export const jsonToExcel = (options: {
  list, header, fileName, bookType,
}) => {
  if (options.header) {
    options.list = options.list.map(item => {
      const obj = {}
      for (const key in item) {
        if (options.header[key]) {
          obj[options.header[key]] = item[key]
        } else {
          obj[key] = item[key]
        }
      }
      return obj
    })
  }

  // 1. 创建一个工作簿 workbook
  const workBook = xlsx.utils.book_new()
  // 2. 创建工作表 worksheet
  const workSheet = xlsx.utils.json_to_sheet(options.list)
  // 3. 将工作表放入工作簿中
  xlsx.utils.book_append_sheet(workBook, workSheet)
  // 4. 生成数据保存
  xlsx.writeFile(workBook, options.fileName || `测试.${new Date().valueOf()}.xlsx`, {
    bookType: options.bookType || 'xlsx'
  })
}

• 下面是结合了ts的写法（添加了类型验证）

import xlsx from 'xlsx'

export const jsonToExcel = (options: {
  list: any[],
  header: Record<string, string>,
  fileName?: string,
  bookType?: xlsx.BookType | undefined,
}) => {
  if (options.header) {
    options.list = options.list.map(item => {
      const obj: Record<string, any> = {}
      for (const key in item) {
        if (options.header[key]) {
          obj[options.header[key]] = item[key]
        } else {
          obj[key] = item[key]
        }
      }
      return obj
    })
  }

  // 1. 创建一个工作簿 workbook
  const workBook = xlsx.utils.book_new()
  // 2. 创建工作表 worksheet
  const workSheet = xlsx.utils.json_to_sheet(options.list)
  // 3. 将工作表放入工作簿中
  xlsx.utils.book_append_sheet(workBook, workSheet)
  // 4. 生成数据保存
  xlsx.writeFile(workBook, options.fileName || `测试.${new Date().valueOf()}.xlsx`, {
    bookType: options.bookType || 'xlsx'
  })
}

将上面的方法单独放入文件中，使用时，只需要引入jsonToExcel方法，并传入对应的参数就可以了