1.安装依赖
npm i file-saver xlsx -S
npm i script-loader -D
2.创建js
这两个文件的代码我会放在文章的最后。
3.html中
表格为假数据。实际使用时用后台请求到的数据代替即可。丑了点但不影响。
<el-upload action="" :on-change="importChange" :auto-upload="false" :show-file-list="false">
<el-button type="primary">导入EXCEL</el-button>
</el-upload>
<el-button type="primary" @click="exportExcel()">导出</el-button>
4.导出方法
// 导出表格
exportExcel() {
require.ensure([], () => {
const {export_json_to_excel} = require("../vendor/Export2Excel.js"); //这里注意路径问题
// 表头
const tHeader = ["id","日期","姓名", "住址"];
//filterVal 对应的表格里的字段名称
const filterVal = ["id","date","name","address"];
//list为要导出的数据
const list = this.tableData;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, "员工列表"); //←表格名称
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},
点击导出后,打开表格
导出成功~
5.导入表格
导入比导出麻烦些,也许需求会让你根据导入的表格中的id去搜寻更多信息。这里先做个最简单的。
拿刚刚导出的表格随便改点内容就拿来用吧~
// 导入
importChange(file, fileList) {
if (fileList.length > 1) {
fileList.splice(0, 1);
}
this.fileTemp = file.raw;
if (this.fileTemp) {
this.importExcel(this.fileTemp);
} else {
this.$message({
type: 'warning',
message: '请上传附件!'
})
}
},
importExcel(obj){
let _this = this;
let inputDOM = this.$refs.inputer;
// 通过DOM取文件数据
this.file = event.currentTarget.files[0];
var rABS = false; //是否将文件读取为二进制字符串
var f = this.file;
var reader = new FileReader();
FileReader.prototype.readAsBinaryString = function(f) {
var binary = "";
var rABS = false; //是否将文件读取为二进制字符串
var pt = this;
var wb; //读取完成的数据
var outdata;
var reader = new FileReader();
reader.onload = function(e) {
var bytes = new Uint8Array(reader.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
//此处引入,用于解析excel
var XLSX = require("xlsx");
if (rABS) {
wb = XLSX.read(btoa(fixdata(binary)), {
//手动转化
type: "base64"
});
} else {
wb = XLSX.read(binary, {
type: "binary"
});