如何让Vue-XLSX转换Excel为JSON时保留空单元格而非忽略

问题根因 #

你配置的defval参数仅传给了<xlsx-read>组件，但实际负责转换JSON格式的是<xlsx-json>组件，该组件的转换逻辑独立，没有继承上层的配置，所以空单元格过滤规则没有被覆盖。 #

修复代码 #

将转换配置直接传入<xlsx-json>组件即可生效：

<section>
  <input type="file" @change="onChange" />
  <xlsx-read :file="file">
    <!-- 把转换配置传给负责输出JSON的xlsx-json组件 -->
    <xlsx-json :sheet="selectedSheet" :options="options">
      <template #default="{collection}">
        <div>
          {{ json = collection }}
        </div>
      </template>
    </xlsx-json>
  </xlsx-read>
</section>

<script>
export default {
  data() {
    return {
      file: null,
      options: {
        defval: "", // 空单元格默认赋值为空字符串
      },
      json: null,
      selectedSheet: 0,
    };
  },
  methods: {
    onChange(e) {
      this.file = e.target.files[0]
    }
  }
}
</script>

备选兜底方案（适配版本差异） #

如果因Vue-XLSX版本不同导致配置不生效，可以手动补全所有表头字段：

1. 先提取完整的表头列表（可从Excel表头行获取，或手动指定）
2. 遍历转换后的集合，给每条数据缺失的字段补空值

// 示例：先确定所有表头字段
const allHeaders = ["Header1", "Header2", "Header3"]
// 处理返回的collection
this.json = collection.map(item => {
  const fullItem = {}
  allHeaders.forEach(header => {
    fullItem[header] = item[header] ?? ""
  })
  return fullItem
})

最终输出效果 #

处理后即可得到所有字段完整的JSON：

[ 
  { "Header1": "a", "Header2": "", "Header3": "c" }, 
  { "Header1": "d", "Header2": "e", "Header3": "f" }, 
  { "Header1": "g", "Header2": "h", "Header3": "i" } 
]

内容的提问来源于stack exchange，提问作者Lahiru Madushan Koralage