Vue前端解析Excel数据方式
更新时间:2024年03月15日 08:48:34 作者:不情不愿
这篇文章主要介绍了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
运行结果:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue+element获取el-table某行的下标,根据下标操作数组对象方式
这篇文章主要介绍了vue+element获取el-table某行的下标,根据下标操作数组对象方式,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧2020-08-08vue-virtual-scroll-list虚拟组件实现思路详解
这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02element table数据量太大导致网页卡死崩溃的解决办法
当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,下面这篇文章主要给大家介绍了关于element table数据量太大导致网页卡死崩溃的解决办法,需要的朋友可以参考下2023-02-02vue/react项目刷新页面出现404报错的原因及解决办法
Vue项目打包部署到线上后,刷新页面会提示404,下面这篇文章主要给大家介绍了关于vue/react项目刷新页面出现404报错的原因及解决办法,文中将解决的办法介绍的很详细,需要的朋友可以参考下2023-05-05
最新评论