vue-element-xlsx在线读取Excel数据预览

1.安装XLSX

npm install xlsx -s

2.复制过去就可以用

<template><div><!--  excel表格上传  --><el-uploadclass="upload-demo"dragaction="https://jsonplaceholder.typicode.com/posts/"multipleaccept=".xlsx":on-exceed="exceed":limit="1":on-remove="remove":http-request="uploadFile"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">1次只能上传1个xls文件，且不超过500kb</div></el-upload><!--  上传的excel表格预览  --><div class="preview-excel"><el-table class="listTable_ele"  v-show="listTable.length != 0" :data="listTable" stripe height="250" style="width:100%"><el-table-column prop="name" label="姓名" width="200" align="center"></el-table-column><el-table-column prop="age" label="年龄" width="200" align="center"></el-table-column><el-table-column prop="city" label="城市" width="200" align="center"></el-table-column><el-table-column prop="sno" label="学号" width="200" align="center"></el-table-column></el-table></div></div>
</template><script>import XLSX from "xlsx";  //引入xlsxexport default {data() {return {listTable: []};},methods: {//解析excelasync uploadFile(params) {const _file = params.file;const fileReader = new FileReader();fileReader.onload = (ev) => {try {const data = ev.target.result;const workbook = XLSX.read(data, {type: 'binary'});for (let sheet in workbook.Sheets) {//循环读取每个文件const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);//若当前sheet没有数据，则continueif(sheetArray.length == 0){continue;}console.log("读取文件");console.log(sheetArray);for(let item in sheetArray){let rowTable = {};//这里的rowTable的属性名注意要与上面表格的prop一致//sheetArray的属性名与上传的表格的列名一致rowTable.name = sheetArray[item].姓名;rowTable.age = sheetArray[item].年龄;rowTable.city = sheetArray[item].城市;rowTable.sno = sheetArray[item].学号;this.listTable.push(rowTable);}console.log(this.listTable)}} catch (e) {this.$message.warning('文件类型不正确！');}};fileReader.readAsBinaryString(_file);},//上传1个以上文件时弹窗提示错误exceed: function() {this.$message.error("最多只能上传1个xls文件");},//删除文件remove() {this.listTable = [];}}};
</script>

3.Excel文件格式

4.实现效果

vue-element-xlsx在线读取Excel数据预览相关推荐

python读取xlsx python读取excel数据
如题 python pandas读取excel数据如何读取特定sheet的excel数据 1.安装pandas 已经有的可以不用再安装 >pip install pandas 2.读取数据首 ...
关于 vue项目中实现导入Excel表 + 预览生成的Excel
项目场景(需求): 1.分步骤填写数据,填写并上传业务Excel表,完成校验,并生成结果 2.生成的结果要和业务Excel表一致,便于用户比较 3.若未填写正确,则提示用户错误信息,且重新提交项目 ...
微信小程序导入导出excel 文件预览文件并转发
文章目录准备js库引入文件获取数据导入导出数据预览全部准备js库 XLSX.JS 链接:https://git.sheetjs.com/sheetjs/sheetjs 打开dist目录 ...
Element文件上传 pdf 及预览
目标:vue+element 实现上传图片及pdf 和预览功能技术:vue.element.vue-pdf 安装及引入: //安装 npm install --save vue-pdf//引入 im ...
Python使用xlrd读取Excel数据时，“xlrd.biffh.XLRDError: Excel xlsx file； not supported”报错的解决方法
最近,在使用PyCharm编辑器进行xlrd读取Excel数据时,出现了"xlrd.biffh.XLRDError: Excel xlsx file; not supported" ...
python读取excelsheet-一文看懂用Python读取Excel数据
原标题:一文看懂用Python读取Excel数据导读:现有的Excel分为两种格式:xls(Excel 97-2003)和xlsx(Excel 2007及以上). Python处理Excel文件主要 ...
一文看懂用Python读取Excel数据
导读:现有的Excel分为两种格式:xls(Excel 97-2003)和xlsx(Excel 2007及以上). Python处理Excel文件主要是第三方模块库xlrd.xlwt.pyexcel- ...
java下载excel导入excel读取excel数据，将数据插入数据库
10:如果你想导出excel表格,请链接:http://blog.csdn.net/xuanzhangran/article/details/54709221 导入的效果如下: 1:开始页面 2:点击 ...
最近很火的在线文件预览txt、doc、ppt、pdf、excel、jpg、png、zip、tar.gz等各种文件及压缩文件在线解压和预览，包括前后端设计和源码，编写搜索引擎多关键词检索名称和内容（四）
最近很火的在线文件预览txt.doc.ppt.pdf.excel.jpg.mp4.png.zip.tar.gz等各种文件及压缩文件在线解压和预览,包括前后端设计和源码,编写一个文件搜索引擎实现多关键词 ...

vue-element-xlsx在线读取Excel数据预览

vue-element-xlsx在线读取Excel数据预览

1.安装XLSX

2.复制过去就可以用

3.Excel文件格式

4.实现效果

vue-element-xlsx在线读取Excel数据预览相关推荐

最新文章

热门文章