front/js

javascript xlsx 엑셀 업로드 방법

juniKang 2022. 6. 17. 21:38

npm install --save https://cdn.sheetjs.com/xlsx-0.18.9/xlsx-0.18.9.tgz

import { read } from 'xlsx';
async function upload(e) {
  const file = e.target.files[0];
  const data = await file.arrayBuffer();
  const workbook = read(data);
}

---vue3 사용---

<script setup>
import { read, utils } from 'xlsx';

async function fileToJson(e) {
  const file = e.target.files[0];
  const blob = await file.arrayBuffer();
  const workbook = read(blob);
  const worksheet = workbook.Sheets[workbook.SheetNames[0]];
  return utils.sheet_to_json(worksheet);
}

async function parseData(e) {
  const json = await fileToJson(e);
  console.log(json);
}
</script>
<template>
  <div>
    <input
      class="form-control form-control-sm"
      type="file"
      @change="parseData"
      ref="fileupload"
    />
  </div>
</template>