效果图：
image.png
基于 vue + element-ui + xlsx + file-saver 实现的导入导出功能，其中表格的导出是参考 🎉PanJiaChen的 vue-element-admin 🎉 后台管理项目内的方法。其中有需要的文件，大家可以到github上进行 复制。
image.png
因为我是在 vue 项目里，所以放到了 src 文件目录下，以及后面的引用。
image.png
//建议安装 0.16.3 的xlsx，高版本的好像会有问题
"file-saver": "^2.0.2",
"xlsx": "^0.16.3"
npm install --save file-saver
npm install --save xlsx
如何导入：
这里我提一下，大致要注意的地方，详细代码可直接看最下面。
1.文件选择，限制为 .xls, .xlsx 文件，获取相关文件数据；
2.默认取的是导入表格文件的第一张 工作表；
image.png
3.根据表头的文字，去匹配相对应的字段，并添加到table中 (当然，你导入的表格格式要和你的表格格式对应呢 ～～)；
image.png
for (var i = 0; i < ws.length; i++) {
var sheetData = {
// 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
//此处的字段名对应 上面表格数据的字段名
age: ws[i]["年龄"],
name: ws[i]["姓名"]
};
that.outputs.push(sheetData);
}
如何导出：
因为是采用别人的方法，目的是为实现效果，有兴趣的可以去研究下，所以说这里就不多 bb 了。
image.png
导出成功～～
image.png
完整代码：
<template>
<div class="app-content">
<el-row>
<el-col :span="7">
<el-upload
action="/"
:on-change="onChange"
:auto-upload="false"
:show-file-list="false"
accept=".xls, .xlsx"
>
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
</el-col>
<el-col :span="7">
<el-button size="small" type="primary" @click="exportExcel">文件导出</el-button>
</el-col>
</el-row>
<el-table
style="margin:20px 0;"
:data="outputs"
border
:header-cell-style="{background:'#f1f1f1',color:'#606266'}"
>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
</el-table>
</div>
</template>
<script>
import XLSX from "xlsx";
export default {
data() {
return {
outputs: [], // 保存读取出来的数据列表
fileData: "" // 保存选择的文件数据
};
},
methods: {
//文件选择时
onChange(file, fileList) {
this.fileData = file; // 保存当前选择文件
this.readExcel(); // 调用读取数据的方法
},
//读取文件数据
readExcel(e) {
let that = this;
const files = that.fileData;
if (!files) {
//如果没有文件
return false;
} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = ev => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary"
});
//导入的文件名称
console.log(workbook.SheetNames);
const wsname = workbook.SheetNames[0]; //取第一张表
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
that.outputs = []; //清空接收数据
for (var i = 0; i < ws.length; i++) {
var sheetData = {
// 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
//此处的字段名对应 上面表格数据的字段名
age: ws[i]["年龄"],
name: ws[i]["姓名"]
};
that.outputs.push(sheetData);
}
} catch (e) {
console.log(e);
return false;
}
};
// 如果为原生 input 则应是 files[0]
fileReader.readAsBinaryString(files.raw);
},
//导出文件
exportExcel() {
if (!this.outputs.length) {
this.$message.warning("暂无数据导出");
return false;
}
import("@/vendor/Export2Excel").then(excel => {
//导出表格头部内容（要与下面字段对照）
const tHeader = ["姓名", "年龄"];
const filterVal = ["name", "age"];
const data = this.formatJson(filterVal);
//保存excel
excel.export_json_to_excel({
header: tHeader,
data,
//导出的文件名
filename: "table-list"
});
});
},
//格式转换
formatJson(filterVal) {
return this.outputs.map(v =>
// obj = {
// name:'',
// age:''
// }
filterVal.map(j => {
// obj[name]
// obj[age]
console.log(v[j]);
return v[j];
})
);
// [[name,age],[name,age],[name,age]]
}
}
};
</script>
<style>
</style>
