vue3+TS导出excel表格

1.下载依赖XLSX

yarn add XLSX
// 或
npm i XLSX

2.1封装函数

// 引入依赖
import * as XLSX from 'xlsx'
// 导出excel
// data导出的数据，titleObj列头，fileName文件名，sheetNamesheet页名
export function exportExcel(data: any, titleObj: object , fileName: string = 'text-file', sheetName: string = 'text-sheet') {
  const tableData = XLSX.utils.json_to_sheet(data)
  const wb = XLSX.utils.book_new()

  // 把表格的表头替换为对应的汉字
  for (const key in tableData) {
    // eslint-disable-next-line no-prototype-builtins
    if (tableData.hasOwnProperty(key)) {
      if (titleObj[tableData[key].v]) {
        tableData[key].v = titleObj[tableData[key].v]
      }
    }
  }

  XLSX.utils.book_append_sheet(wb, tableData, sheetName)
  XLSX.writeFile(wb, fileName + '.xlsx')
}

2.2使用

import { exportExcel } from '@/utils/common'

const titleObj = {
    creationTime: '日期',
    cleanCoalValue: '清煤量',
    indexCompletionScale: '指标完成度',
    cleanTrainCount: '清车列数',
    trainAverage: '列均清煤量',
    cleanCarriageCount: '清理车厢数',
    standardCleanCarriageCount: '清理达标车厢数'
  }

let fileName = '单条日报'

// tableData为需要导出的表格数据，titleObj为列头，fileName为文件名
exportExcel(tableData, titleObj, fileName)

vue3+TS导出excel表格

悦读