Vue前端解析Excel数据方式
作者：不情不愿
这篇文章主要介绍了Vue前端解析Excel数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue前端解析Excel数据
想要在前端实现 Excel 表格数据的解析
需要安装 xlsx 包
cnpm 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
运行结果：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。