一篇文章介绍前端导入Excel文件解析为Json

安装依赖

npm i xlsx

案例代码

<script setup>
import { ref } from 'vue'
import * as XLSX from 'xlsx'
​
const fn = (e)=>{
  let fileObj = e.target.files[0]
​
  // FileReader 对象就是专门操作二进制数据，主要用于将文件内容读入内存
  const fileReader = new FileReader()
  // .readAsArrayBuffer 读取制定的Bolb 或 File内容
  fileReader.readAsArrayBuffer(fileObj)
​
  fileReader.onload = (event)=>{
    const fileData = event.target.result
    // 从电子表格字节中提取数据
    const workbook = XLSX.read(fileData,{
      type:'binary'
    })
    // 按选项卡顺序列出工作表名称
    const wsname = workbook.SheetNames[0]
    // 从工作表创建JS值数组
    const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
    console.log(sheetJson);
  }
}
</script>
​
<template>
<h1>前端导入 EXCEL 解析为 Json</h1>
<div>选择你想要解析的EXCEL文件</div>
<input type="file" @change="fn">
</template>
​
<style scoped>
​
</style>
​

结果显示

浏览器界面显示

准备需要导入的EXCEL文件

点击浏览器页面中的选择文件按钮上传该Excel文件，在控制器中查看输出结果。