Vue 前端解析 Excel 数据
想要在前端实现 Excel 表格数据的解析,需要安装 xlsx 包:
npm install xlsx
然后在需要使用的地方引入:
import * as XLSX from 'xlsx/xlsx.mjs'
使用 Element UI 提供的上传功能组件对 excel 表格数据进行解析,全部代码如下:
<template> <div id="app"> <h2>{{message}}</h2> <el-upload action accept = ".xlsx, .xls" :auto-upload="false" :show-file-list="false" :on-change="handle"> <el-button type="primary">打开excel</el-button> </el-upload> </div> </template> <script> import * as XLSX from 'xlsx/xlsx.mjs' export default { name: 'App', data(){ return { message:' XLSX 的使用' } }, methods:{ readFile(file){//文件读取 return new Promise(resolve => { let reader = new FileReader(); reader.readAsBinaryString(file);//以二进制的方式读取 reader.onload = ev =>{ resolve(ev.target.result); } }) }, async handle(ev){ let file = ev.raw; console.log(file) if(!file){ console.log("文件打开失败") return ; }else{ let data = await this.readFile(file); let workbook = XLSX.read(data,{ type: "binary"});//解析二进制格式数据 console.log('二进制数据的解析:') console.log(workbook) let worksheet = workbook.Sheets[workbook.SheetNames[0]];//获取第一个Sheet let result = XLSX.utils.sheet_to_json(worksheet);//json数据格式 console.log('最终解析的 json 格式数据:') console.log(result) } } } } </script> <style> </style>
原始表格数据:实验数据.xls
运行结果: