场景
前端导入excel表格，直接前端解析文件，将数据传给后端。
需要的库
安装
使用
1
|
import XLSX from "xlsx";
|
代码实现
html部分
1
2
3
4
5
6
7
8
9
10
|
<div class="container">
{{ upload_file || "导入" }}
<input
type="file"
accept=".xls,.xlsx"
class="upload_file"
@change="readExcel($event)"
/>
</div>
</div>
|
JS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
readExcel(e) {
// 读取表格文件
let that = this;
const files = e.target.files;
if (files.length <= 0) {
return false;
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
this.$message({
message: "上传格式不正确，请上传xls或者xlsx格式",
type: "warning"
});
return false;
} else {
// 更新获取文件名
that.upload_file = files[0].name;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary"
});
const wsname = workbook.SheetNames[0]; //取第一张表
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
console.log(ws);
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
}
|
整体代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<template>
<div>
<div class="container">
{{ upload_file || "导入" }}
<input
type="file"
accept=".xls,.xlsx"
class="upload_file"
@change="readExcel($event)"
/>
</div>
</div>
</template>
<script>
import XLSX from "xlsx";
export default {
data() {
return {
upload_file: "",
lists: []
};
},
methods: {
submit_form() {
// 给后端发送请求，更新数据
console.log("假装给后端发了个请求...");
},
readExcel(e) {
// 读取表格文件
let that = this;
const files = e.target.files;
if (files.length <= 0) {
return false;
} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
this.$message({
message: "上传格式不正确，请上传xls或者xlsx格式",
type: "warning"
});
return false;
} else {
// 更新获取文件名
that.upload_file = files[0].name;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary"
});
const wsname = workbook.SheetNames[0]; //取第一张表
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
that.lists = [];
// 从解析出来的数据中提取相应的数据
ws.forEach(item => {
that.lists.push({
username: item["用户名"],
phone_number: item["手机号"]
});
});
// 给后端发请求
this.submit_form();
} catch (e) {
return false;
}
};
fileReader.readAsBinaryString(files[0]);
}
}
};
</script>
|
样式
原本的文件上传样式可能会跟页面整体风格不搭，所以需要修改其样式。不过此处并不是直接修改其样式而是通过写一个div来覆盖原有的上传按钮。此处样式与element UI中的primary按钮样式相同。
实现该样式的关键在于.upload_file的opacity和position。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.container {
border: none;
border-radius: 4px;
background-color: #409eff;
height: 40px;
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 15px;
min-width: 80px;
*zoom: 1;
}
.upload_file {
font-size: 20px;
opacity: 0;
position: absolute;
filter: alpha(opacity=0);
width: 60px;
}
|
最后
前端的日益强大导致很多功能都可以在前端去直接实现，并且可以减少服务器压力。
当然单纯地去实现这样的数据传输，尤其对于重要数据，是很不安全的，因此在前后端数据传输的时候，可以加上加密校验，这个后期会来写的。
参考文章
为了实现该功能参考了如下大佬的文章：