vue3+ts导出excel文件

安装

# 安装 export2excel

$ npm install -s export2excel

# 安装 xlxs
$ npm install -s xlxs

# 安装 file-saver
$ npm install -s file-saver

在shims-vue.d.ts文件添加模块声明

declare module '@/vendor/Export2Excel' {
  export function export_table_to_excel(id: string): void
  export function export_json_to_excel(option: any): void
  export function blobDownload(blob: object): void
}

在utils.ts工具文件添加

export function formatTableDataToJsonByKeys<T, K extends keyof T>(data: T[], keys: K[]): T[K][][] {
  return data.map(i => keys.map(key => i[key]))
}

在页面文件引入

import { formatTableDataToJsonByKeys } from '@/lib/utils'
import * as $filters from '@/lib/filters'

使用

    function handleDownload() {
     

      import('@/vendor/Export2Excel').then(excel => {//引入Export2Excel
        const header: string[] = []
        const keys: string[] = []

        state.tableColumns.forEach((column: any) => {//表头label和所属字段
          header.push(column.label)
          keys.push(column.prop)
        
        })
        console.log(header,'header')
        console.log(keys,'keys')

        const data = formatTableDataToJsonByKeys(//使用formatTableDataToJsonByKeys生成excel数据
          state.batteryTests.map((item: any) => {
            return {
              ...item,
               //例如时间（通过这里的 $filters处理，在文章最后说明）或者其他需要特殊处理的数据可以在这里处理，也可以在循环之前将数据处理好
              test_state: formatTestState(item),
              beg_time: $filters.formatDatetime(item.beg_time),
              end_time: $filters.formatDatetime(item.end_time),
              'unit_id,chl_id': item.unit_id + '-' + item.chl_id,
              product_sn_time: $filters.formatDatetime(item.product_sn_time),
            }
          }),
          keys
        )
        excel.export_json_to_excel({
          header,//表头
          data,//表数据
          filename: `本页数据-${Date.now()}`,//导出文件名
        })
      })
    }

处理时间格式：

1、安装dayjs

npm install dayjs --save

2、在工具文件夹里面新建filters.ts文件,抛出自定义方法

import dayjs from 'dayjs'

export function formatDate(time: number | string): string {
  if (!time) return ''
  return dayjs(time).format('YYYY-MM-DD')
}
export function formatDatetime(time: number | string): string {
  if (!time) return ''
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

3、引入

import * as $filters from '@/lib/filters'

4、使用

 可以参考博客：vue-export2excel 导出表格_俊小张的博客-CSDN博客