使用JavaScript拿到excel文件内容

<script setup>

import { ref } from 'vue';

import * as XLSX from 'xlsx';//引用



//组件通信

defineProps({

  msg: String,

});



const file = ref(null);

let a = ref(0);



const handleFileChange = (event) => {

  const b = event.target.files[0];

  a.value = b.name;



  console.log(event.target.files[0]);



  const file = event.target.files[0];//拿到上传的excel文件

  if (file) {

    const reader = new FileReader();

    reader.onload = (e) => {

      const data = new Uint8Array(e.target.result);

      const workbook = XLSX.read(data, { type: 'array' });

      const sheetName = workbook.SheetNames[0];

      const sheet = workbook.Sheets[sheetName];

      const jsonData = XLSX.utils.sheet_to_json(sheet);

      console.log(jsonData);//输出文件内容

    };

    reader.readAsArrayBuffer(file);

  }



  const selectedFile = event.target.files[0];

  file.value = selectedFile;

};

</script>



<template>

  <h1>{{ msg }}</h1>

  <h1>{{ a }}</h1>



  <div class="file-upload">

    <input type="file" @change="handleFileChange" />

    <button @click="uploadFile">Upload</button>

    <p v-if="file">{{ file.name }}</p>

  </div>

</template>



<style scoped>

.read-the-docs {

  color: #888;

}

</style>