Vue Excel JSON 형식으로 Parsing

onload sample.xlsx

8.4 kB

Terminal

npm install xlsx

 

Main.vue

<template>
  <input type="file" @change="onloadFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
</template>

<script>
import * as XLSX from "xlsx";
import excel from "@/api/excel";

export default {
  data() {
return {
  items: []
}
  },
  methods: {
onloadFile(event) {
      const file = event.target.files[0];
      let reader = new FileReader();
      reader.onload = (e) => {
        let data = reader.result;
        // let data = e.target.result;
        let workbook = XLSX.read(data, {type: 'binary'});
        workbook.SheetNames.forEach(sheetName => {
          const roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
          this.items.push(roa);
          excel.onloadFile(JSON.parse(JSON.stringify(this.items))[0]);
        });
      };
      reader.readAsBinaryString(file);
    },
  }
}
</script>

 

excel.js

import axios from '@/api/axios'

const onloadFile = async (params, result) => {
  console.log('params', params)
  const options = {
    method: 'POST',
    url: '/excel/onloadFile',
    data: params
  }
  await axios(options)
    .then((response) => {
      if (response.data.code === 0) {
        result(response.data.success)
      } else {
        result(null)
      }
    })
}

export default {
  onloadFile
}

 

Spring Boot
Controller

@PostMapping("/onloadFile")
public CommonResult onloadFile(@RequestBody List<Map<String, Object>> paramList) {
  for (Map<String, Object> param : paramList) {
    System.out.println("이름: " + param.get("이름"));
  }
  return responseService.getSuccessResult();
}