vue3实现表格数据导出Excel（自定义表头中文名）

1. npm i -S   xlsx

在文件中引入 

import * as XLSX from "xlsx"

封装一个导出的 ts 方法

// import XLSX from "xlsx"
import * as XLSX from "xlsx"


/*
    * @description:
    * @param {Object} json 服务端发过来的数据
    * @param {String} name 导出Excel文件名字
   
    * @param {String} titleArr 导出Excel表头
   
    * @param {String} sheetName 导出sheetName名字
    * @return:
    */
export function exportExcel(json:any, name:any, titleArr:any, sheetName:any) {
    console.log(XLSX,'XLSX')
    /* convert state to workbook */
    const data = []
    const keyArray = []
    const getLength = function (obj:any) {
      let count = 0
      for (const i in obj) {
        if (obj.hasOwnProperty(i)) {
        count++
        }
      }
    return count
    }
    for (const key1 in json) {
    if (json.hasOwnProperty(key1)) {
      const element = json[key1]
      const rowDataArray = []
      for (const key2 in element) {
      if (element.hasOwnProperty(key2)) {
        const element2 = element[key2]
        rowDataArray.push(element2)
        if (keyArray.length < getLength(element)) {
        keyArray.push(key2)
        }
      }
      }
      data.push(rowDataArray)
    }
    }
    // keyArray为英文字段表头
    data.splice(0, 0, keyArray, titleArr)
    console.log('data', data)
    const ws = XLSX.utils.aoa_to_sheet(data)
    const wb = XLSX.utils.book_new()
    // 此处隐藏英文字段表头
    const wsrows = [{ hidden: true }]
    ws['!rows'] = wsrows // ws - worksheet
    XLSX.utils.book_append_sheet(wb, ws, sheetName)
    /* generate file and send to client */
    XLSX.writeFile(wb, name + '.xlsx')
  }

使用:

  function exportData() {
            console.log(selectionsRows.value, '选中 id')
            const titleArr = ['id', '事件描述', '事件类型', '事件来源', '事件性质']
            exportExcel(selectionsRows.value, '事件列表文件', titleArr, '事件')
        }

最后附上官网链接 :xlsx - npm