vue3 上传excel
2023-03-06 本文已影响0人
罗不错
const upload = {
/*html*/
template: `
<input type="file" @change="onChange" />
{{tableHead}}
<br/>
{{tableData}}
`,
data() {
return {
fileList: [], //上传文件列表
tableHead: [], //表头
tableData: [], // 表数据
};
},
methods: {
onChange(e) {
const file = e.target.files[0];
const fileReader = new FileReader();
fileReader.onload = (ev) => {
try {
const data = ev.target.result;
const workbook = read(data, { type: "binary" });
const params = [];
// 取对应表生成json表格内容
workbook.SheetNames.forEach((item) => {
params.push({
name: item,
dataList: utils.sheet_to_json(workbook.Sheets[item]),
});
this.tableData.push(utils.sheet_to_json(workbook.Sheets[item]));
});
// 该算法仅针对表头无合并的情况
if (this.tableData.length > 0) {
// 获取excel中第一个表格数据tableData[0][0],并且将表头提取出来
for (const key in this.tableData[0][0]) {
this.tableHead.push(key);
}
}
return params;
} catch (e) {
console.log("error:" + e);
return false;
}
};
fileReader.readAsBinaryString(file);
},
},
};