前端解析Excel文件

实现效果：选择.xlsx文件，前端进行解析

image.png

1.下载xlsx:

npm install xlsx

2.引用

import * as XLSX from 'xlsx'

3.使用

<template>
  <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
</template>
<script>
import * as XLSX from 'xlsx'
export default {
  data() {
   return{}   
  },
  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' });
          const worksheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[worksheetName];
          this.jsonFormData  = XLSX.utils.sheet_to_json(worksheet);
          console.log("处理转换后的JSON数据",this.jsonFormData);
        };
        reader.readAsArrayBuffer(file);
      },
  },
}
</script>
<style lang="less" scoped>
</style>