注意:vue中要实现表格的导入与导出,首先要install两个依赖,
npm install -S file-saver xlsx 和 npm install -D script-loader。其次,在项目src目录下新建一个文件夹vendor(名字随意),在此文件夹下放置两个文件Blob.js和Export2Excal.js(下载地址:http://files.cnblogs.com/files/luyuefeng/vendor.rar)。之后就可以愉快的导入导出了。
1、导入
<input id="upload" type="file" @change="importfxx()" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
复制代码
importfxx(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]);
}
var XLSX = require('xlsx');
if(rABS) {
wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
type: 'base64'
});
} else {
wb = XLSX.read(binary, {
type: 'binary'
});
}
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
let importList = _this.dateTransition(outdata);
}
reader.readAsArrayBuffer(f);
}
if(rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
};
// 将对应的中文key转化为自己想要的英文key
dateTransition(outdata) {
let list = [];
var obj = {};
for(var i = 0; i < outdata.length; i++) {
obj = {};
for(var key in outdata[i]) {
if(key == '工号') {
obj['jobNumber'] = outdata[i][key];
} else if(key == '姓名') {
obj['name'] = outdata[i][key];
} else if(key == '部门') {
obj['department'] = outdata[i][key];
}
}
list.push(obj);
}
return list;
};
例如:现有一张excel表格需要导入。
导入后,获取到的outdata为
outdata = [
{
"姓名": "张三",
"工号": "1001",
"部门": "技术部"
},
{
"姓名": "李四",
"工号": "1002",
"部门": "技术部"
},
];
这里获取到outdata的json格式的key值对应的是导入的excel表格中的表头名称,往往都是中文的,要想把中文key转化为自己想要的英文key就需要用到dateTransition函数了。
通过dateTransition函数转化后对应的importList变为
importList = [
{
"name": "张三",
"jobNumber": "1001",
"department": "技术部"
},
{
"name": "李四",
"jobNumber": "1002",
"department": "技术部"
}
];
2、导出
<input type="button" value="导出" @click="exportExcel" />
exportExcel() { //兼容ie10哦!
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel'); //引入文件
const tHeader = ['姓名', '工号', '部门']; //将对应的属性名转换成中文
//const tHeader = [];
const filterVal = ['name', 'jobNumber', 'department'];//table表格中对应的属性名
const list = exportData; //想要导出的数据
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
}
这里的exportData就是你想要导出的数组
exportData = [
{
"name": "张三",
"jobNumber": "1001",
"department": "技术部"
},
{
"name": "李四",
"jobNumber": "1002",
"department": "技术部"
}
];
导出的excel表