前端自己导入excel并展示到表格中
在这里主要是用的 xlsx 这个插件
首先 npm install xlsx --save
然后 import xlsx from "xlsx";
接下来就是在代码中 进行导入操作
<el-button type="primary" size="mini" @click="uploadFile">导入</el-button>
<input type="file" id="imFile" style="display: none" @change="importFile(this)" :accept="'xlsx'" />
这是我们的表格控件
<common-table ref="partTable"></common-table>
接下来就进行表格的导入及数据的读取转化
uploadFile() {
let imFile = document.getElementById("imFile");
imFile.click();
},
analyzeData(data) {
// 此处可以解析导入数据
return data;
},
fixdata(data) {
// 文件流转BinaryString
var o = "";
var l = 0;
var w = 10240;
for (; l < data.byteLength / w; ++l) {
o += String.fromCharCode.apply(
null,
new Uint8Array(data.slice(l * w, l * w + w))
);
}
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
},
dealFile(data) {
console.log(data[0], "处理导入的数据");
let imFile = document.getElementById("imFile");
imFile.value = "";
if (data.length <= 0) {
this.$message.warning("请导入正确信息");
} else {
this.excelData = data.map(item => {
//自己表格的列字段
const arrItem = {
partNoAndName: "",
singleDosage: ""
};
//将excel文件的标题名称转换，将数据格式转换成数组显示格式
for (let key in item) {
//这里是导入的Excel表格的表头
if (key === "零部件编码"&&item["零部件编码"]) {
//对你的表格字段进行赋值
arrItem.partNoAndName = `${item["零部件编码"]}/${item["零部件名称"]}`;
} else if (key === "单台用量") {
arrItem.singleDosage = item[key];
}
}
console.log("arrItem", arrItem);
return arrItem;
});
//对自己表格进行数据渲染，这是我们自己的方法
this.$refs.partTable.loadLocalData({ list: this.excelData });
}
},
importFile() {
let obj = document.getElementById("imFile");
if (!obj.files) {
return;
}
let f = obj.files[0];
let reader = new FileReader();
let _this = this;
reader.onload = function(e) {
try {
var data = e.target.result;
_this.wb = xlsx.read(data, {
type: "binary"
});
} catch (e) {
this.$message.warning("文件类型不正确");
return;
}
let json = xlsx.utils.sheet_to_json(
_this.wb.Sheets[_this.wb.SheetNames[0]]
);
_this.dealFile(_this.analyzeData(json)); // analyzeData: 解析导入数据
};
reader.readAsBinaryString(f);
},
