使用xlsx库将json导出为csv、xlsx、json格式文件

1.安装 xlsx

npm install xlsx

2.创建exportUtils.js文件

/**
 * 导出表格数据为多种格式
 * @param {Array} data - 要导出的数据数组
 * @param {String} fileName - 文件名(不带扩展名)
 * @param {String} fileType - 导出类型: 'xlsx', 'csv', 'json'
 */

import * as XLSX from 'xlsx'

export function exportTableData(data, fileName = 'exported-data', fileType = 'xlsx', headerMap) {
 if (!data || !Array.isArray(data) || data.length === 0) {
  console.error('导出数据不能为空')
  return
 }

 try {
  switch (fileType.toLowerCase()) {
   case 'xlsx':
    exportToXLSX(data, fileName, headerMap)
    break
   case 'csv':
    exportToCSV(data, fileName, headerMap)
    break
   case 'json':
    exportToJSON(data, fileName)
    break
   default:
    console.error('不支持的导出格式')
  }
 } catch (error) {
  console.error('导出失败:', error)
 }
}

// 处理数据，将英文字段名转换为中文表头
function processDataWithChineseHeaders(data, customHeaderMap) {
 let headerMap = customHeaderMap
 let processedData = []
 let headers = []

 // 获取所有可能的字段
 let allFields = new Set()
 data.forEach((item) => {
  Object.keys(item).forEach((key) => {
   allFields.add(key)
  })
 })

 // 构建headers数组和映射关系
 let fieldMapping = {}
 allFields.forEach((field) => {
  let chineseHeader = headerMap[field] || field // 如果没有映射，使用原字段名
  headers.push(chineseHeader)
  fieldMapping[field] = chineseHeader
 })

 // 转换数据
 data.forEach((originalItem) => {
  let newItem = {}
  Object.keys(originalItem).forEach((key) => {
   let chineseKey = fieldMapping[key]
   newItem[chineseKey] = originalItem[key]
  })
  processedData.push(newItem)
 })

 return { processedData, headers }
}

// 导出为Excel (XLSX)
function exportToXLSX(data, fileName, headerMap) {
 let worksheet = null
 if (headerMap) {
  let { processedData, headers } = processDataWithChineseHeaders(data, headerMap)
  worksheet = XLSX.utils.json_to_sheet(processedData, { header: headers })
 } else {
  worksheet = XLSX.utils.json_to_sheet(data)
 }
 let workbook = XLSX.utils.book_new()
 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
 XLSX.writeFile(workbook, `${fileName}.xlsx`)
}

// 导出为CSV
function exportToCSV(data, fileName, headerMap) {
 let worksheet = null
 if (headerMap) {
  let { processedData, headers } = processDataWithChineseHeaders(data, headerMap)
  worksheet = XLSX.utils.json_to_sheet(processedData, { header: headers })
 } else {
  worksheet = XLSX.utils.json_to_sheet(data)
 }
 let csvOutput = XLSX.utils.sheet_to_csv(worksheet)
 downloadFile(csvOutput, `${fileName}.csv`, 'text/csv;charset=utf-8;')
}

// 导出为JSON
function exportToJSON(data, fileName) {
 let jsonString = JSON.stringify(data, null, 2)
 downloadFile(jsonString, `${fileName}.json`, 'application/json')
}

// 通用文件下载方法
function downloadFile(content, fileName, mimeType) {
 let blob = new Blob([content], { type: mimeType })
 let link = document.createElement('a')
 let url = URL.createObjectURL(blob)

 link.href = url
 link.download = fileName
 document.body.appendChild(link)
 link.click()

 setTimeout(() => {
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
 }, 100)
}

3.使用（本例为在vue中应用）

// 字段和中文表头对照关系
headerMap: {
    tag: '机位',
    ioAddr: '通道地址',
    typeDesc: '类型',
    curVal: '当前值',
    time: '更新时间',
    info: '其他信息',
}

  // 导出
  export_data() {
   let tableData = _.cloneDeep(this.getSearchInfo)
   if (!tableData.length) return this.$message.warning('无数据不可导出')
   let time = this.$dayjs().format('YYYY-MM-DD HH:mm:ss')
   // 数据删除不在 headerMap 中的字段，如不需要导出字段可忽略此步骤，但要保证headerMap中字段对照关系和原数据中字段一一对应
   let key_list = Object.keys(this.headerMap)
   tableData.forEach((obj) => {
    Object.keys(obj).forEach((key) => {
     if (!key_list.includes(key)) {
      delete obj[key]
     }
    })
   })
   exportTableData(tableData, `监测点-${time}`, 'xlsx', this.headerMap) // xlsx中文表头
   exportTableData(tableData, `监测点-${time}`, 'csv', this.headerMap) // csv中文表头
   exportTableData(tableData, `监测点-${time}`, 'xlsx') // xlsx原字段表头
   exportTableData(tableData, `监测点-${time}`, 'csv') // csv原字段表头
  }