VUE-JSON-EXCEL导出Excel时如何自定义修改日期显示格式

问题原因 #

vue-json-excel 组件的fields配置如果直接传入字段名字符串，导出时会直接读取字段的原始值，不会做任何格式转换。你当前配置Date: 'dateReserve'时，导出拿到的就是接口/数据源里存的原始ISO格式时间字符串2022-06-10T18:18:34.000Z，这也是你用moment处理没生效的核心原因——你没有把格式化后的值接入组件的导出逻辑。

解决方法 #

两种方案二选一即可，优先推荐第一种，不会污染原始业务数据：

• 方案1：通过field回调动态格式化（推荐）
  vue-json-excel的fields配置支持传入对象形式的规则，通过callback回调在导出时动态处理字段值，不需要修改原始列表数据：

  import moment from 'moment'
  
  export default {
    data() {
      return {
        // 其余配置保持不变
        json_fields: {
          // 修改Date字段的配置
          Date: {
            field: 'dateReserve',
            callback: (originalVal) => {
              // 对应目标格式 日/月/年 时:分:秒
              return moment(originalVal).format('D/M/YYYY HH:mm:ss')
            }
          },
          // 其余导出字段按原有规则配置即可
        },
        tempahanList: [] // 你的原始业务数据
      }
    }
  }
  

  模板部分的<JsonExcel>组件代码不需要做任何改动，保持原有写法即可。

• 方案2：提前格式化原始数据源
  如果不想用回调配置，可以在拿到tempahanList数据后，先遍历把日期字段提前格式化成目标格式，再传给组件导出：

  // 接口返回数据后做预处理
  this.tempahanList = rawList.map(item => ({
    ...item,
    dateReserve: moment(item.dateReserve).format('D/M/YYYY HH:mm:ss')
  }))
  

  注意：这个方案会修改原始数据里的dateReserve值，如果页面其他模块需要用到原始时间做计算、二次处理，不建议用这个方法。

踩坑提示：如果格式化后发现时间和预期差8小时，是因为原始ISO字符串是UTC时区，moment默认会转成本地时区输出。如果需要固定按UTC时间格式化，把格式化逻辑改成moment.utc(originalVal).format('D/M/YYYY HH:mm:ss')即可。

内容的提问来源于stack exchange，提问作者Akmal Khairi