excel导入导出

导入

对于 excel 导入 首先我们先来明确一下它的业务流程：

1. 点击 excel 导入 按钮进入 excel 导入页面
2. 页面提供了两种导入形式
   1. 点击按钮上传 excel
   2. 把 excel 拖入指定区域
3. 选中文件，进行两步操作
   1. 解析 excel 数据
   2. 上传解析之后的数据
4. 上传成功之后，返回 员工管理（用户列表） 页面，进行数据展示

---

所以根据这个业务我们可以看出，整个 excel 导入核心的原理部分在于 选中文件之后，上传成功之前 的操作，即：

1. 解析 excel 数据（最重要）
2. 上传解析之后的数据

---

根据上面所说，整个的实现流程我们也可以很轻松得出：

1. 创建 excel 导入页面
2. 点击 excel 导入按钮，进入该页面
3. 该页面提供两种文件导入形式
4. 选中文件之后，解析 excel 数据（核心）
5. 上传解析之后的数据
6. 返回 员工管理（用户列表） 页面

---

解析 excel 数据我们需要使用 xlsx

npm i xlsx@0.17.0

UploadExcel\utils.js:

import XLSX from 'xlsx'
/**
 * 获取表头（通用方式）
 */
export const getHeaderRow = sheet => {
  const headers = []
  const range = XLSX.utils.decode_range(sheet['!ref'])
  let C
  const R = range.s.r
  /* start in the first row */
  for (C = range.s.c; C <= range.e.c; ++C) {
    /* walk every column in the range */
    const cell = sheet[XLSX.utils.encode_cell({
      c: C,
      r: R
    })]
    /* find the cell in the first row */
    let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
    if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
    headers.push(hdr)
  }
  return headers
}

UploadExcel\index.vue

import XLSX from 'xlsx'
import { defineProps, ref } from 'vue'
import { getHeaderRow } from './utils'

const props = defineProps({
  // 上传前回调
  beforeUpload: Function,
  // 成功回调
  onSuccess: Function
})

/**
 * 点击上传触发
 */
const loading = ref(false)
const excelUploadInput = ref(null)
const handleUpload = () => {
  excelUploadInput.value.click()
}
const handleChange = (e) => {
  const files = e.target.files
  const rawFile = files[0] // only use files[0]
  if (!rawFile) return
  upload(rawFile)
}

/**
 * 触发上传事件
 */
const upload = (rawFile) => {
  excelUploadInput.value.value = null
  // 如果没有指定上传前回调的话
  if (!props.beforeUpload) {
    readerData(rawFile)
    return
  }
  // 如果指定了上传前回调，那么只有返回 true 才会执行后续操作
  const before = props.beforeUpload(rawFile)
  if (before) {
    readerData(rawFile)
  }
}

/**
 * 读取数据（异步）
 */
const readerData = (rawFile) => {
  loading.value = true
  return new Promise((resolve, reject) => {
    // https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
    const reader = new FileReader()
    // 该事件在读取操作完成时触发
    // https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload
    reader.onload = (e) => {
      // 1. 获取解析到的数据
      const data = e.target.result
      // 2. 利用 XLSX 对数据进行解析
      const workbook = XLSX.read(data, { type: 'array' })
      // 3. 获取第一张表格名称
      const firstSheetName = workbook.SheetNames[0]
      // 4. 只读取 Sheet1（第一张表格）的数据
      const worksheet = workbook.Sheets[firstSheetName]
      // 5. 解析数据表头
      const header = getHeaderRow(worksheet)
      // 6. 解析数据体
      const results = XLSX.utils.sheet_to_json(worksheet)
      // 7. 传入解析之后的数据
      generateData({ header, results })
      // 8. loading 处理
      loading.value = false
      // 9. 异步完成
      resolve()
    }
    // 启动读取指定的 Blob 或 File 内容
    reader.readAsArrayBuffer(rawFile)
  })
}

/**
 * 根据导入内容，生成数据
 */
const generateData = (excelData) => {
  props.onSuccess && props.onSuccess(excelData)
}

导出

分析业务逻辑：

1. 点击 excel 导出按钮
2. 展示 dialog 弹出层
3. 确定导出的 excel 文件名称
4. 点击导出按钮
5. 获取 所有用户列表数据
6. 将 json 结构数据转化为 excel 数据，并下载
   将 json 结构数据转化为 excel 数据，并下载

实现方案：

1. 创建 excel 导出弹出层
2. 处理弹出层相关的业务
3. 点击导出按钮，将 json 结构数据转化为 excel 数据，并下载（核心）

json结构数据转换为excel数据：

1. 将 json 结构数据转化为 excel 数据
2. 下载对应的 excel 数据

对于这两步的逻辑而言，最复杂的莫过于 将 json 结构数据转化为 excel 数据 这一步的功能，不过万幸的是对于该操作的逻辑是 通用处理逻辑，搜索 Export2Excel 我们可以得到巨多的解决方案，所以此处我们 没有必要 手写对应的转换逻辑

那么有了 Export2Excel.js 的代码之后 ，接下来我们还需要导入两个依赖库：

1. xlsx （已下载）：excel 解析器和编译器
2. file-saver：文件下载工具，通过 npm i file-saver@2.0.5 下载

json数组转换为excel逻辑：

/* eslint-disable */
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)
}
/**
 * 将json格式数组转化为 Excel 数据格式
 */
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
}

/**
 * json数据转excel数据
 */
export const export_json_to_excel = ({
  multiHeader = [],
  header, // 表头
  data, // 数据体
  filename, // 文件名
  merges = [],
  autoWidth = true, // 是否自动列宽
  bookType = 'xlsx' // 文件类型 .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}`
  )
}

时间处理逻辑：

import dayjs from 'dayjs'
export const dateFormat = (val, format = 'YYYY-MM-DD') => {
  if (isNaN(val)) {
    return val
  }
  val = parseInt(val)
  return dayjs(val).format(format)
}

实现逻辑：

import { dateFormat } from '@/utils/date'
const i18n = useI18n()
const exportDefaultName = i18n.t('msg.excel.defaultName')
const excelName = ref(exportDefaultName)
/**
 * 导出按钮点击事件
 */
const loading = ref(false)
const onConfirm = async () => {
  loading.value = true
  // 1.请求到需要导出的数据
  const allUser = (await getUserManageAllList()).list
  console.log('需要导出的数据', allUser)
  // 2.导入工具包
  const excel = await import('@/utils/Export2Excel')
  // 3.将需要导出的数据转换为二维数组
  const data = formatJson(USER_RELATIONS, allUser)
  console.log('转为二维数组后的导出数据', data)
  // 4.将数据转换为excel表格
  excel.export_json_to_excel({
    // excel 表头
    header: Object.keys(USER_RELATIONS),
    // excel 数据（二维数组结构）
    data,
    // 文件名称
    filename: excelName.value || exportDefaultName,
    // 是否自动列宽
    autoWidth: true,
    // 文件类型
    bookType: 'xlsx'
  })
  closed()
}

// 该方法负责将数组转化成二维数组
const formatJson = (headers, rows) => {
  // 首先遍历数组
  // [{ username: '张三'},{},{}]  => [[’张三'],[],[]]
  return rows.map((item) => {
    return Object.keys(headers).map((key) => {
      // 时间特殊处理
      if (headers[key] === 'openTime') {
        return dateFormat(item[headers[key]])
      }
      // 角色特殊处理
      if (headers[key] === 'role') {
        const roles = item[headers[key]]

        return JSON.stringify(roles.map((role) => role.title))
      }
      return item[headers[key]]
    })
  })
}