js解析通过Excel上传的文件

背景#

有的时候我们在Excel中填写内容后通过前端批量上传，然后将数据批量存到数据库中

步骤#

1. 安装xlsx

npm install xlsx

2. 对上传的文件进行解析，获取上传文件中的每行数据

<template>
  <div>
    <button @click="parse">解析</button>
    <input type="file" ref="test" />
  </div>
</template>

<script>
import { read, utils } from 'xlsx'
export default {
  name: 'Test',
  methods: {
    async parse() {
      const test = this.$refs.test
      const f = await test.files[0].arrayBuffer()
      const wb = read(f)
      const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
        // 解决excel对传入时间格式数据的解析。 注意：需要将excel对应的列手动设置"单元格格式"
        raw: false,
      })
      console.log(data)
      // 获取列名
      const columns = Object.keys(data[0])
      // 获取上传的每行数据
      const result = []
      for (let item of data) {
        const row = []
        for (let k of columns) {
          row.push(item[k])
        }
        result.push(row)
      }
      console.log(result)
    },
  },
}
</script>

<style scoped></style>

3. 效果

注意#

手动调整excel列单元格类型为日期#

选择自己到时要渲染的格式