JS读取Excel数据

为什么要导入Excel数据，在所有的系统中几乎都会涉及到添加数据功能，添加数据有两种方法，第一种就是手动输入，一次只能输入一条数据。另一种就是通过导入excel文件实现多条数据的添加。
接下来我们就通过一个例子来实现excel数据的导入

1、示例代码

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><el-row><el-col><el-uploadref="upload"action="/":show-file-list="false":on-change="(file, fileList) => {batchImport(file, fileList,importHeader)}":auto-upload="false"style="margin-left: 30px;width:130px"><el-buttonstyle="width: 130px"type="primary"plainicon="el-icon-upload2"class="handle-del">批量导入</el-button></el-upload></el-col></el-row></div>
</template><script>
import XLSX from "xlsx";
export default {name: 'HelloWorld',data () {return {xlsxJson: {},importHeader:["姓名","年龄"],msg: 'Welcome to Your Vue.js App'}},methods:{batchImport(file, fileList,header) {// let file = file.files[0] // 使用传统的input方法需要加上这一步const types = file.name.split(".")[1];const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some((item) => item === types);if (!fileType) {alert("格式错误！请重新选择");return;}this.file2Xce(file,header).then((tabJson) => {if (tabJson && tabJson.length > 0) {this.xlsxJson = tabJson;}this.setLedgerList();});},setLedgerList() {let data = [];this.xlsxJson[0].sheet.forEach((item) => {data.push(item);});console.log(data)//  这个data就可以传给后端，存入数据了},file2Xce(file,header) {return new Promise(function (resolve, reject) {const reader = new FileReader();reader.onload = function (e) {const data = e.target.result;// XLSX.read返回值为WorkBook对象，包含整个文件的所有表this.wb = XLSX.read(data, {type: "binary",});const result = [];//SheetNames包含了文件中所有的表明this.wb.SheetNames.forEach((sheetName) => {result.push({sheetName: sheetName,sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName], {//header是设置表属性名，如果设置为数字，则属性名由0，1，2...表示//此处设置的header为importHeader:["姓名","年龄"],最终结果的属性名对应该数组header: header,}),});});console.log("result")console.log(result)//将excel文件第一张表的第一项(excel的第一行为属性名，应该去掉)删除result[0].sheet.shift();resolve(result);};reader.readAsBinaryString(file.raw);// reader.readAsBinaryString(file) // 传统input方法});},}
}
</script>

2、结果分析

2.1素材

excel文件包含两张表
表一

表二

2.2代码解析及结果

file2Xce函数获取两张表的数据
结果
解析到excel文件的两张表

每个表都有两个属性：
sheet：表的数据
sheetName:表的名字

第一张表内数据，如果file2Xce函数不加header参数，就不会显示属性名（红色箭头标记处）

setLedgerList函数将表中数据存放在data中，作为后续请求链接的data,传递给后端。

3、总结

这里的file2Xce函数只是去掉了第一张表的第一行属性值，第二张表没有做处理，所以setLedgerList只是把第一张表的数值传递给了data。
在这个例子中有点瑕疵：本次举例使用的两张表的字段不同，正常情况下两张表的字段应该是相同的，这样就可以通过forEach实现对多表的操作，即将两张表的数据都存到data中。

Vue使用js读取Excel数据相关推荐

js读取excel数据后的时间格式转换
用nodejs的"node-xlsx"库,获取excel的数据之后,里面的日期值全面变成了一个整数值.至于,怎么使用"node-xlsx"获取数据,代码: co ...
利用JS-XLSX插件用JS读取excel数据
下载xlsx.core.min.js引入到页面中(下载地址见下面地址:http://download.csdn.net/download/dylbb818/9595652) <!DOCTYPE ...
js读取Excel的数据（仅IE有效）
js读取Excel,返回一个二维数组 /*** desc:解析一个本地excel,返回一个二维数组* param {}对象属性 path,sheet,rowStart,rowEnd,colStart ...
python读取表格数据_Python读取Excel数据并根据列名取值
一直想将自己接触到的东西梳理一遍,可就是迈不出第一步,希望从这篇总结开始不要再做行动的矮人了. 最近测试过程中需要用到python读取excel用例数据,于是去了解和学习了下xlrd库,这里只记录使用 ...
js 读取excel 导入mysql_可以读取EXCEL文件的js代码
首页给个有中文说明的例子,下面的例子很多大家可以多测试. function readExcel() { var excelApp; var excelWorkBook; var excelSheet; ...
读取Excel 数据并写入到Word示例
读取Excel 数据并写入到Word示例 0x01 读取Excel 数据并写入到Word示例 1.1 配置pom.xml 1.2 配置 application.properties 1.3 自定义配置 ...
python提取excel前十行生成图_Python读取Excel数据生成图表 v2.0
Python读取Excel数据生成图表 v2.0 一.需求背景自己一直在做一个周基金定投模拟,每周需要添加一行数据,并生成图表.以前一直是用Excel实现的.但数据行多后,图表大小调整总是不太方便, ...
java下载excel导入excel读取excel数据，将数据插入数据库
10:如果你想导出excel表格,请链接:http://blog.csdn.net/xuanzhangran/article/details/54709221 导入的效果如下: 1:开始页面 2:点击 ...
odoo openerp 分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
[分享-oe嵌入qweb]用js读取数据库数据,用类似html语言重写web报表 (阅读 4403 次) 阿狸新手上路帖子: 26 人气: 1 开启阅读模式 [分享-oe嵌入qweb]用js读取 ...
JS读取Excel时日期格式错误
问题:在做项目的过程中遇到一个问题,导入excel数据时,发现日期的格式错误.预期效果是2022/1/2,导入后的效果却是44563.查阅资料后发现44563表示 1900年1月1号到2022年1月2 ...

Vue使用js读取Excel数据