vue+elementUI使用node-xlsx实现选择excel并解析其数据，导入显示在table组件中

业务需求要求：选择excel文件，去解析和导入数据到表格组件里面。

解决思路：使用elementUI组件，很容易实现选择文件的对话框。使用node-xlsx很容易实现excel数据转成数组。到此为止距离在table中显示还差数据的处理。
在table组件中显示需要对象数组，即文档示例中的

 tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]

而我们实际获取到的：

[
[[日期],[姓名],[地址]],
[[447336],['王小虎'],['上海市普陀区金沙江路 1516 弄']]
]

Table表格组件根据对象名字段（prop）显示，且为了以后可能使用该数据进行其他业务操作。在把数组转对象过程中，需要将各数据对应的属性名写成键值。实际操作中的属性往往比较大，为了减少循环，先把字段名写成数组。

<script>
// 引入 node-xlsx 模块 npm install node-xlsx --save
import xlsx from "node-xlsx";
export default {
data: () => {
return {
currentPageHeight: document.documentElement.clientHeight,
multipleSelection: [],
currentfilename: "",
sheetList: [],
columnnprop: [
"date",
"name",
"address"
],
columnname: [
"日期",
"姓名",
"地址"
],
};
},
components: {},
mounted() {},
methods: {
timeToString(time) {
var str = "";
const timeobj = new Date(time);
var year = timeobj.getFullYear();
var month = timeobj.getMonth() + 1;
var date = timeobj.getDate();
str = year + "-" + month + "-" + date;
return str;
},
submitfile(event, file, fileList) {
console.log(file);
if (!/.(xls|xlsx)$/.test(file.name.toLowerCase())) {
this.$message({
message: "上传格式不正确，请上传xls或者xlsx格式",
type: "warning",
});
return false;
}
//提示当前导入文件名称
this.currentfilename = file.name;
const sheets = xlsx.parse(file.raw.path);
//看该文件有几个表
console.log(sheets.length);
// 打印页面信息..
const sheet = sheets[0];
// 打印页面数据
// console.log(sheet.data);
sheet.data.forEach((row, index) => {
const obj = {};
//将解析的数组转成对象数组
if (index != 0) {
for (let i = 0; i < row.length; i++) {
if (i == 0) {
//日期为距离1900年的天数，所以需要处理成日期格式
const date = new Date(1900, 0, row[i] - 1).toDateString();
obj[this.columnnprop[i]] = this.timeToString(date);
} else {
//如index=1时，obj[name]='王小虎'
obj[this.columnnprop[i]] = row[i];
}
}
this.sheetList.push(obj);
}
});
console.log(this.sheetList);
},
},
};
</script>

HTML：

<template>
<div class="app-container">
<el-upload
class="upload-demo"
:limit="1"
action=""
:on-progress="submitfile"
>
<el-button id="openBtn" type="primary"
>导入文件<i class="el-icon-upload el-icon--right"></i
></el-button>
<div v-show="currentfilename !== ''" class="uploadFile_tip">
当前导入的文件名：<b>{{ currentfilename }}</b>
</div>
</el-upload>
<el-table
:data="sheetList"
:height="currentPageHeight - '155'"
border
tooltip-effect
style="width: 100%"
@selection-change="handleSelectionChange"
><el-table-column type="selection" width="30" />
<el-table-column
sortable
:prop="columnnprop[0]"
:label="columnname[0]"
width="120"
>
</el-table-column>
<el-table-column
:prop="columnnprop[1]"
:label="columnname[1]"
width="120"
>
<el-table-column
:prop="columnnprop[2]"
:label="columnname[2]"
width="120"
>
</el-table>
</div>
</template>

最后

以上就是快乐铃铛为你收集整理的vue+elementUI使用node-xlsx实现选择excel并解析其数据，导入显示在table组件中的全部内容，希望文章能够帮你解决vue+elementUI使用node-xlsx实现选择excel并解析其数据，导入显示在table组件中所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。