现如今后台管理项目中越来越人性化，文件上传，文件的下载（主页中都有）表格的导入和导出。
今天给大家搞个前后端联调的导入表格的功能，废话不多说，咱直接上代码吧！！！！
代码后面有对代码的解析，方便大家根据自己的需求进行行对的调整。
<template slot="menuLeft" >
<el-button
type="warning"
icon="el-icon-folder-add">
<el-upload
:on-change="fileonChange"
style="float: right;"
:auto-upload="false"
:show-file-list="false"
accept=".xls, .xlsx"
ref="upload"
:multiple="true">
导入
</el-upload>
</el-button>
</template>2。通过第三方插件
1.npm install xlsx 通过这个命令进行按照。
2.const XLSX = require('xlsx'); 在需要的页面进行引入
//初始化导入
initalizeImport(file){
let that = this;
if (!file) {
//如果没有文件
return false;
} else if (!/.(xls|xlsx)$/.test(file.name.toLowerCase())) {
this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
return false;
}
const fileReader = new FileReader();
fileReader.onload = async (ev) => {
try {
const data = ev.target.result;
const workbook = XLSX.read(data, {
type: "binary",
});
const wsname = workbook.SheetNames[0]; //导入excel的第一张表
// 导入的信息
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
let params = [];
//如果一行表头，则i从0开始，如果是两行则从1开始以此类推
for (var i = 0; i < ws.length; i++) {
let one = ws[i]["发件人"] || "默认值"; // 如果表格中该字段为空，则设置默认值
let two= ws[i]["联系电话"] || "17343824899"; // 如果表格中该字段为空，则设置默认值
let three = ws[i]["电子邮箱"] || "2982543375@qq.com"; // 如果表格中该字段为空，则设置默认值
let four = ws[i]["收货地址"] || "佳木斯"; // 如果表格中该字段为空，则设置默认值
let five= ws[i]["发货地址"] || " 中国"; // 如果表格中该字段为空，则设置默认值
let six= ws[i]["收件人"] || "中国"; // 如果表格中该字段为空，则设置默认值
let serve= ws[i]["商铺名称"] || "自营";// 如果表格中该字段为空，则设置默认值
let eight= ws[i]["中间商"] || "校长"; // 如果表格中该字段为空，则设置默认值
let nine= ws[i]["客服"] || "WC"; // 如果表格中该字段为空，则设置默认值
let ten= ws[i]["备注"] || "结束"; // 如果表格中该字段为空，则设置默认值
let sheetData = {
// 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
one: one,
two: two,
three: three,
four: four,
five:five,
six:six,
serve:serve,
eight:eight,
nine: nine,
ten:ten
};
params.push(sheetData)
}
const yitang = workbook.SheetNames[1];
const yt = XLSX.utils.sheet_to_json(workbook.Sheets[yitang]);
let one = yt[i]["发件人"] || "默认值"; // 如果表格中该字段为空，则设置默认值
let two= yt[i]["联系电话"] || "17343824899"; // 如果表格中该字段为空，则设置默认值
let three = yt[i]["电子邮箱"] || "2982543375@qq.com"; // 如果表格中该字段为空，则设置默认值
let four = yt[i]["收货地址"] || "佳木斯"; // 如果表格中该字段为空，则设置默认值
let five= yt[i]["发货地址"] || " 中国"; // 如果表格中该字段为空，则设置默认值
let six= yt[i]["收件人"] || "中国"; // 如果表格中该字段为空，则设置默认值
let serve= yt[i]["商铺名称"] || "自营";// 如果表格中该字段为空，则设置默认值
let eight= yt[i]["中间商"] || "校长"; // 如果表格中该字段为空，则设置默认值
let nine= yt[i]["客服"] || "WC"; // 如果表格中该字段为空，则设置默认值
let ten= yt[i]["备注"] || "结束"; // 如果表格中该字段为空，则设置默认值
let sheetData = {
// 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
one: one,
two: two,
three: three,
four: four,
five:five,
six:six,
serve:serve,
eight:eight,
nine: nine,
ten:ten
};
params.push(sheetData)
}
// 这里是走的后端接口
inital(params).then(res=>{
this.$message({
message: "导入数据表格成功",
showClose: true,
type: "success",
});
this.onLoad(this.page)
})
} catch (e) {
this.$message({
message: "导入数据表格失败"+e,
showClose: true,
type: "error",
});
return false;
}
};
// 如果为原生 input 则应是 files[0]
fileReader.readAsBinaryString(file.raw);
},
fileonChange(file,fileList){
this.initalizeImport(file)
},它首先检查上传的文件是否符合要求（必须为 xls 或 xlsx 格式），然后使用 FileReader 对象读取文件内容，并利用 js-xlsx 库将 Excel 表格转化为 JSON 格式。最后，它遍历 JSON 数据，并将每行数据封装成一个对象放入数组中，最终完成数据的导入。需要根据实际情况进行调整。
第一层循环代码的意思是文章来源：https://www.toymoban.com/news/detail-824594.html
这段代码是遍历导入的 Excel 表格中的数据，并将每一行数据封装成一个对象，然后将该对象添加到名为 params 的数组中。具体来说，代码通过循环遍历 ws 数组（即导入的 Excel 数据转换后的 JSON 数组），在每次循环的过程中，根据表头名称将对应的值赋给新创建的对象的相应属性。同时，它也会判断是否存在规格型号的值，如果存在，则将该值赋给 specs 属性。最后，将创建的对象添加到 params 数组中。第二层也是。文章来源地址https://www.toymoban.com/news/detail-824594.html
到了这里，关于使用element实现导入execl表格的功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
