Excel 导出实现分析

Excel导出通用的业务逻辑实现，解决方法及思路都是通用的，可以分为以下四个步骤：

1.确定导出的Excel名称

2.获取所有需要导出的列表数据

3.将 json 结构数据转化为 excel 数据

4.下载对应的 excel 数据

1.确定导出的Excel名称

可以对需要导出的excel表格，指定一个默认的文件名：

const ExportDefaultName = '导出列表'

2.获取所有需要导出的列表数据

（1）通过接口获取所有列表数据

/**
 * 获取所有用户列表数据
 */
export const UserAllList = () => {
  return request({
    url: '/user-manage/all-list'，
    method: 'GET'
  })
}

（2）调取数据接口，获取列表数据

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {role: Array(1), _id: '62ae86c3c2ef574809f6789a', username: 'silver', mobile: '17766289526', openTime: '2022-06-00', …}
1: {role: Array(1), _id: '62ae86c3c2ef574809f6789b', username: 'maroon', mobile: '14655278758', openTime: '2022-06-00', …}
2: {role: Array(1), _id: '62ae86c3c2ef574809f6789c', username: 'coral', mobile: '17269090982', openTime: '2022-06-00', …}
3: {role: Array(1), _id: '62ae86c3c2ef574809f6789d', username: 'green', mobile: '18766528987', openTime: '2022-06-00', …}
4: {role: Array(1), _id: '62ae86c3c2ef574809f6789e', username: 'wheat', mobile: '17766289526', openTime: '2022-06-00', …}
5: {role: Array(1), _id: '62ae86c3c2ef574809f6789f', username: 'snow', mobile: '14655278758', openTime: '2022-06-00', …}
6: {role: Array(1), _id: '62ae86c3c2ef574809f678a0', username: 'azure', mobile: '17269090982', openTime: '2022-06-00', …}
length: 7
[[Prototype]]: Array(0)

3.将 json 结构数据转化为 excel 数据

因为接口返回的数据是， json 数组对象 的形式，但是导出时的数据需要为 二维数组，所以我需要对现有的数据进行处理，需要有一个方法来把 json 结构转化为 二维数组

（1）创建数据对应表

/**
 * 导入数据对应表
 */
export const USER_HEADERS = {
  姓名: 'username',
  联系方式: 'mobile',
  角色: 'role',
  开通时间: 'openTime'
}

（2）创建数据解析方法

// USER_RELATIONS 表头 allUser 需要导出的数据列表 
const data = formatJson(USER_RELATIONS, allUser)

// 该方法负责将数组转化成二维数组
const formatJson = (headers, rows) => {
  // 首先遍历数组
  // [{ username: 'test'},{},{}]  => [['test'],[],[]]
  return rows.map(item => {
    return Object.keys(headers).map(key => {
      return item[headers[key]]
    })
  })
}

转换后可以得到这样的的数据：

(15) [Array(4), Array(4), Array(4), Array(4), Array(4), Array(4)]
0: (4) ['orange', '18766528987', '["员工"]', '2022-05-31']
1: (4) ['purple', '17766289526', '["员工"]', '2022-05-31']
2: (4) ['peal', '14655278758', '["员工"]', '2022-05-31']
3: (4) ['white', '17269090982', '["员工"]', '2022-05-31']
4: (4) ['black', '18766528987', '["员工"]', '2022-05-31']
5: (4) ['silver', '17766289526', '["员工"]', '2022-05-31']
6: (4) ['maroon', '14655278758', '["员工"]', '2022-05-31']
length: 6
[[Prototype]]: Array(0)

（3）Excel导出所需依赖库

1. xlsx（已下载）：excel 解析器和编译器
2. file-saver：文件下载工具

Excel导出处理逻辑是通用的，搜索Export2Excel会有很多用于excel导出可参考的转换逻辑，再引入xlsx和file-saver就可以实现excel的导出功能。

可以自行封装一个excel转换逻辑 ：

import { saveAs } from 'file-saver'
import XLSX from 'xlsx'

function datenum(v, date1904) {
  if (date1904) v += 1462
  var epoch = Date.parse(v)
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}

function sheet_from_array_of_arrays(data, opts) {
  var ws = {}
  var range = {
    s: {
      c: 10000000,
      r: 10000000
    },
    e: {
      c: 0,
      r: 0
    }
  }
  for (var R = 0; R != data.length; ++R) {
    for (var C = 0; C != data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R
      if (range.s.c > C) range.s.c = C
      if (range.e.r < R) range.e.r = R
      if (range.e.c < C) range.e.c = C
      var cell = {
        v: data[R][C]
      }
      if (cell.v == null) continue
      var cell_ref = XLSX.utils.encode_cell({
        c: C,
        r: R
      })

      if (typeof cell.v === 'number') cell.t = 'n'
      else if (typeof cell.v === 'boolean') cell.t = 'b'
      else if (cell.v instanceof Date) {
        cell.t = 'n'
        cell.z = XLSX.SSF._table[14]
        cell.v = datenum(cell.v)
      } else cell.t = 's'

      ws[cell_ref] = cell
    }
  }
  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
  return ws
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook()
  this.SheetNames = []
  this.Sheets = {}
}

function s2ab(s) {
  var buf = new ArrayBuffer(s.length)
  var view = new Uint8Array(buf)
  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
  return buf
}

export const export_json_to_excel = ({
  multiHeader = [],
  header,
  data,
  filename,
  merges = [],
  autoWidth = true,
  bookType = 'xlsx'
} = {}) => {
  // 1. 设置文件名称
  filename = filename || 'excel-list'
  // 2. 把数据解析为数组，并把表头添加到数组的头部
  data = [...data]
  data.unshift(header)
  // 3. 解析多表头，把多表头的数据添加到数组头部（二维数组）
  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }
  // 4. 设置 Excel 表工作簿（第一张表格）名称
  var ws_name = 'SheetJS'
  // 5. 生成工作簿对象
  var wb = new Workbook()
  // 6. 将 data 数组（json格式）转化为 Excel 数据格式
  var ws = sheet_from_array_of_arrays(data)
  // 7. 合并单元格相关（['A1:A2', 'B1:D1', 'E1:E2']）
  if (merges.length > 0) {
    if (!ws['!merges']) ws['!merges'] = []
    merges.forEach((item) => {
      ws['!merges'].push(XLSX.utils.decode_range(item))
    })
  }
  // 8. 单元格宽度相关
  if (autoWidth) {
    /*设置 worksheet 每列的最大宽度*/
    const colWidth = data.map((row) =>
      row.map((val) => {
        /*先判断是否为null/undefined*/
        if (val == null) {
          return {
            wch: 10
          }
        } else if (val.toString().charCodeAt(0) > 255) {
          /*再判断是否为中文*/
          return {
            wch: val.toString().length * 2
          }
        } else {
          return {
            wch: val.toString().length
          }
        }
      })
    )
    /*以第一行为初始值*/
    let result = colWidth[0]
    for (let i = 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j]['wch'] < colWidth[i][j]['wch']) {
          result[j]['wch'] = colWidth[i][j]['wch']
        }
      }
    }
    ws['!cols'] = result
  }

  // 9. 添加工作表（解析后的 excel 数据）到工作簿
  wb.SheetNames.push(ws_name)
  wb.Sheets[ws_name] = ws
  // 10. 写入数据
  var wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: 'binary'
  })
  // 11. 下载数据
  saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream'
    }),
    `${filename}.${bookType}`
  )
}

Excel导出实现

调用 export_json_to_excel 方法，完成 excel 导出：

// 导入工具包
const excel = await import('@/utils/Export2Excel')
const data = formatJson(USER_RELATIONS, list)  
excel.export_json_to_excel({
    // excel 表头
    header: Object.keys(USER_RELATIONS),
    // excel 数据（二维数组结构）
    data,
    // 文件名称
    filename: excelName.value || exportDefaultName,
    // 是否自动列宽
    autoWidth: true,
    // 文件类型
    bookType: 'xlsx'
  })