Vue2中导入Excel并解析为json数据

2024-07-29 20:00:00 | 前端Number of visitors 359

1、安装必要的库

首先,你需要安装xlsx库。你可以使用npm或yarn来安装它:


npm install xlsx  
// 或
yarn add xlsx


2、在Vue组件中导入并使用xlsx库

接下来,在你的Vue组件中,你可以导入并使用xlsx库来读取和解析Excel文件。


// importExcel.vue

<template>  
  <div>  
    <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" ref='fileEl'/>  
  </div>  
</template>  
  
<script>  
import * as XLSX from 'xlsx';  
  
export default {  
  methods: {  
    handleFileUpload(event) {  
      const file = event.target.files[0];  
      const reader = new FileReader();  
      
      reader.onload = (e) => {  
        const data = new Uint8Array(e.target.result);  
        const workbook = XLSX.read(data, { type: 'array' });  
  
        // 假设你的Excel文件只有一个工作表  
        const worksheetName = workbook.SheetNames[0];  
        const worksheet = workbook.Sheets[worksheetName];  
  
        // 将工作表转换为JSON对象数组  
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: "" });  
  
        console.log(jsonData); // 输出解析后的JSON数据  
      };  
  
      reader.readAsArrayBuffer(file);  
      this.$refs.fileEl.value = '' //重置input的值
    },  
  },  
};  
</script>





send发送