可拖拽的select组件

前言

一般而言，导出文件都是由服务端实现的，返回oss地址或者io流之后前端再处理，今天我来给大家介绍一个前端导出文件的库，sheetjs。

用法

这里就单刀直入了，直接讲最简单的用法。

导入库

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'
  })

通过上述代码，可以实现以下效果

自定义表头

定义表头

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)

通过上述代码，可以实现以下效果

但是现在这样每次使用都还需要调用，这里封装一个公用方法

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'
  })
}

好了，本篇前端导出文件的sheetjs库就讲到这里了，欢迎大家支持