开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

前言

在上一篇文章介绍了Excel导入功能，本文介绍Excel导出功能如何实现

逻辑分析

需要实现的功能如下

分析业务逻辑，点击Excel导出按钮后，展示弹出层，在弹出层中输入excel文件名，或者使用默认文件名，点击导出按钮后，拿到需要展示的数据，将数据转化为excel数据后下载

所以excel导出的核心就是最后一步如何转化数据并下载

实现

基本样式

首先创建弹出层组件,接收从父组件传来的一个Boolean值，来控制弹出层的出现和消失，点击关闭按钮后调用emits事件修改boolean值

Export2Excel.vue

<template>
  <el-dialog
    :title="$t('msg.excel.title')"
    :model-value="modelValue"
    @close="closed"
    width="30%"
  >
    <el-input
      :placeholder="$t('msg.excel.placeholder')"
    ></el-input>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">{{ $t('msg.excel.close') }}</el-button>
        <el-button type="primary" @click="onConfirm">{{
          $t('msg.excel.confirm')
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
})
const emits = defineEmits(['update:modelValue'])

// 导出按钮点击事件
const onConfirm = async () => {
  closed()
}

// 关闭
const closed = () => {
  emits('update:modelValue', false)
}
</script>

在父组件中，先为excel导出按钮绑定点击事件

<el-button type="success" @click="onToExcelClick">
	{{ $t('msg.excel.exportExcel') }}
</el-button>

导入弹出层组件，绑定一个控制弹出层显示和消失的boolean值

···
<export-to-excel v-model="exportToExcelVisible"></export-to-excel>
···

import ExportToExcel from './components/Export2Excel.vue'

const exportToExcelVisible = ref(false)

点击按钮后将值修改为true，弹出层出现

const onToExcelClick = () => {
  exportToExcelVisible.value = true
}

导出的前置处理

文件名处理

导出文件标题input的双向绑定

<el-input
  v-model="excelName"
  :placeholder="$t('msg.excel.placeholder')"
></el-input>

接着对文件名进行一些处理

const i18n = useI18n()
// 获取默认标题
let exportDefaultName = i18n.t('msg.excel.defaultName')
// 双向绑定input
const excelName = ref('')
// input框默认值为默认标题
excelName.value = exportDefaultName
// 监听语言的变化，获取最新的语言标题
watchSwitchLang(() => {
  exportDefaultName = i18n.t('msg.excel.defaultName')
  excelName.value = exportDefaultName
})

监听语言变化的方法如下

// 监听语言变化
export function watchSwitchLang(...cbs) {
  watch(
    () => store.getters.language,
    () => {
      cbs.forEach((cb) => cb())
    }
  )
}

导出逻辑

对导出按钮绑定loading

···
<el-button type="primary" @click="onConfirm" :loading="loading">{{
	$t('msg.excel.confirm')
}}</el-button>
···

const loading = ref(false)

弹出层点击确认后，将loading变为true

在点击关闭按钮后，将loading变为false

// 确认
const onConfirm = async () => {
  loading.value = true

  closed()
}

// 关闭
const closed = () => {
  loading.value = false
  emits('update:modelValue', false)
}

在onConfirm方法中，需要获取导出的数据,调用接口获取

const onConfirm = async () => {
  loading.value = true
  // 后端返回数据
  const data = xxxxxx
  
  closed()
}

最后需要将获取的json结构数据转化为excel数据格式，这一步是通用的逻辑处理，直接使用下方代码即可

新建utils/Export2Excel.js

/* 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)
}

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

此外还需要两个依赖库

xlsx ：excel 解析器和编译器

file-saver：文件下载工具

npm i xlsx@0.17.0 

npm i file-saver@2.0.5

导出为excel需要的数据为二维数组，其中的每个数组为excel一行的数据，所以需要将获取的json数据转化为二维数组

数据对照表

Export2ExcelConstants.js

export const USER_RELATIONS = {
  姓名: 'username',
  联系方式: 'mobile',
  角色: 'role',
  开通时间: 'openTime'
}

将数组转化成二维数组方法的第一个参数为对照表，第二个参数为json数据，这里依照自己获得的数据进行对应转化即可

// 将数组转化成二维数组
const formatJson = (headers, rows) => {
  return rows.map(item => {
    return Object.keys(headers).map(key => {
        return JSON.stringify(roles.map(role => role.title))
      }
      return item[headers[key]]
    })
  })
}

在onConfirm方法中对数据进行转化

import { USER_RELATIONS } from './Export2ExcelConstants'

const onConfirm = async () => {
  loading.value = true
  loading.value = true
  // 后端返回数据
  const data = xxxxxx
  const datas = formatJson(USER_RELATIONS, data)
  
  closed()
}

最后动态导入调用工具包，调用其export_json_to_excel方法导出即可,需要传入配置对象，包括表头数据文件名称等，自动列宽和文件类型在export_json_to_excel定义时已经指定

const onConfirm = async () => {
  ···
  const datas = formatJson(USER_RELATIONS, data)
    // 导入工具包
  const excel = await import('@/utils/Export2Excel')
  excel.export_json_to_excel({
    // 表头
    header: Object.keys(USER_RELATIONS),
    // 数据
    data:datas,
    // 文件名称
    filename: excelName.value || exportDefaultName
    // 是否自动列宽
    // 文件类型
  })
  closed()
}