配合Element中的el-upload组件进行提取Excel中的数据
XLSX使用:
1.npm install xlsx
2.import XLSX from "xlsx"
核心代码
/**
* @description: 导入excel并进行数据提取
* @return:
*/
Vue.prototype.$importExcel = function (file, header) {
let _this = this;
return new Promise(function (resolve, reject) {
const types = file.name.split('.')[1]
const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
if (!fileType) {
_this.$message({
type: "warning",
message: "文件格式不正确,请重新选择!"
});
reject();
}
const reader = new FileReader();
reader.onload = function (e) {
const data = e.target.result;
this.wb = XLSX.read(data, {
type: "binary"
});
const wsname = this.wb.SheetNames[0];
const ws = this.wb.Sheets[wsname];
/* Convert array of arrays */
const sheetJson = XLSX.utils.sheet_to_json(ws);
let tableData = []; //转换为真正的table所需要的数据
//excel转为json数据,记住header中的label一定要和excel中的表头汉字一致,不然无法匹配
for (let item of sheetJson) {
let obj = {};
for (let key in item) {
for (let childItem of header) {
if (key === childItem.label) {
obj[childItem.prop] = item[key];
break;
}
}
}
tableData.push(obj);
}
resolve(tableData);
};
reader.readAsBinaryString(file.raw);
});
}
使用
html:
<el-upload
action
class="importExcel upload-demo"
ref="upload"
:auto-upload="false"
:file-list="fileList"
:show-file-list="false"
:on-change="change"
>
<el-button size="mini">导 入</el-button>
</el-upload>
js
change(file) {
this.$importExcel(file, this.headers).then(tableData => {
console.log(tableData);
});
}
headers:
headers: [
{
label: "姓名",
prop: "name"
},
{
label: "年龄",
prop: "age"
}
]
要提取数据的excel:
提取结果 从excel中提取到两条数据
以上就是结合ElementUi 提取Excel数据的用法。其中headers中的label一定要和excel中的列明一致
后记:
后面遇到IE中某些方法不兼容的问题
说明=>FileReader中readAsBinaryString方法在IE中使用报错以及替代方法
所以readAsBinaryString(file.raw)
要替换为readAsArrayBuffer(file.raw)
;
因为替换为Buffer了,所以onload相应的XLSX读取到的数据类型也要做出变化
查看XLSX
所以使用type为buffer的类型即可
this.wb = XLSX.read(data, {
type: "buffer"
});
咻咻~