js中导入excel文件并转换为json格式的数据

选择的包为 xlsx一个 js 库

测试结合 Vue + ElementUI一起使用。

• 先安装对应依赖

npm i xlsx --save

• 引入 elementUI 后，使用 upload 上传组件来实现文件导入

<el-upload 
    ref="upload" 
    accept=".xls,.xlsx"
    action=""
    :auto-upload="false"
    :on-change="handleUpload" 
    :show-file-list="false">
    <el-button>EXCEL 导入</el-button>
</el-upload>

• 编写读取 excel 文件的方法

<script>
  // 先导入 xlsx 
  import XLSX from 'xlsx'
  export default {
    methods: {
      readExcel (file) {
        const type = file.name.split('.')[1]
        if (!['xlsx', 'xls'].includes(type)) {
          this.$message({ type: 'warning', message: '文件格式错误！请重新选择' })
          return
        }

        const reader = new FileReader()
        const result = [] // 保存转化成功的 json格式
        reader.onload = e => {
          const data = e.target.result
          const wb = XLSX.read(data, {
            type: 'binary'
          })
          // 这里需要遍历，因为 excel 左下角有多张 sheet 表，如果只需要第一张表就不用遍历
          wb.SheetNames.forEach((sheetName) => {
              result.push({
                sheetName: sheetName,
                sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName]) // 生成JSON表格内容
              })
          })
            
          // 处理 json 格式数据
          const test = []
          for (let item of result) {
            let time = null
            // excel导出json格式数据中有关时间的转换（因为导出json的时间格式为数字了，所以需要转换）
            if (typeof item['时间'] === 'number') {
              time = new Date(1900, 0, item['时间'] - 1).toLocaleDateString()
            }
          }
          console.log(test)
        }
        reader.readAsBinaryString(file.raw)
      },
      handleUpload (file) {
        this.readExcel(file)
      }
    }
  }
</script>

• 上传文件改变调用方法

methods: {
    handleUpload (file) {
        this.readExcel(file) // 如果在这里接收导出的 json 数据的话，会拿不到预期结果
    }
}

导入excel文件为 json 格式

补充：
js 跳出循环使用 for of等

let test = []
for (let item of result) {
    for (let i of Object.keys(item)) {
      if (!formatCh.includes(i)) {
        this.$message({ type: 'warning', message: `表头 “${i}” 格式错误，请重新上传!` })
        return false
      }
    }
    // 数组对象替换对象的 key 值
    test.push({
      name: String(item.name),
      unit: item.unit
    })
  }