纯前端实现excle导出vue3+ts版本

紧接着上次xls导入的需求最近又有了xls导出的需求，依旧使用的xlsx这个包直接开整。 先写hook

const useExcelSheetArray = <T>(tableData:T[][],title:string,header:{prop:keyof T,name:string}[][],excelTitle:string,sheetTitle:string[]) => {
  let wb = XLSX.utils.book_new()
  sheetTitle.forEach((item,index) => {
    let data = [[title], header[index].map(item => item.name)]
    tableData[index].forEach(r => {
      let rowData: string[] = []
      header[index].forEach(item =>{
        rowData.push(r[item.prop] + '')
      })
      data.push(rowData)
    })
    let ws = XLSX.utils.aoa_to_sheet(data)
    ws["!merges"] = [XLSX.utils.decode_range(`${String.fromCharCode(65)}1:${String.fromCharCode(65 + header[index].length - 1)}1`)]
    XLSX.utils.book_append_sheet(wb, ws, item)
  })
  XLSX.writeFile(wb, excelTitle +".xlsx")

小写一下数据处理

"upperCoinFactory":[
    {
      "name":"学生姓名",
      "prop":"studentName"
    },{
      "name":"所在学校",
      "prop":"schoolArea"
    },{
      "name":"地址",
      "prop":"address"
    },{
      "name":"商品数量",
      "prop":"goodsNum"
    },{
      "name":"联系电话",
      "prop":"phoneNum"
    },{
      "name":"创建时间",
      "prop":"createTime"
    },{
      "name":"支付价格",
      "prop":"priceNow"
    },{
      "name":"支付状态",
      "prop":"payStatus"
    },{
      "name":"订单号",
      "prop":"outTradeNo"
    }
  ]
const res = await program.childrenMusicFindInfoByLike<tableTypeHosts>({
    studentType: studentTypeSelect.value === -1 ? '' : studentTypeSelect.value,
    payStatus: payStatus.value === -1 ? '' : payStatus.value,
    name: inputName.value, 
    startTime:value1.value ? setTime(value1.value[0]) : undefined,
    endTime:value1.value? setTime(value1.value[1]) : undefined,
})
const headerPropArr = [[...[...TableJson.Yi].map(item => getHeader(item))]] as {
    prop: keyof tableTypeHosts
    name: string
}[][]
const newExcelArr = [res!.data.result.map(item => ({
    ...item,
    sex:item.sex === 0 ? '男' : '女',
    studentType: item.studentType === 0 ? "小荧星学员" : "非小荧星学员",
    payStatus: item.payStatus === 1 ? "已支付" : "未支付",
})).map(item => 
    headerPropArr[0].reduce<Record<string,string | number>>((rowData,{prop}) => ({
        ...rowData,
        [prop]:item[prop] ?? ''
    }),{})
)]

执行后的结果，当然也支持多个sheet导出

完美，需要的兄弟们试一试吧