实现SheetJS读取excel表格数据并将表头中文转英文

上次完成了通过SheetJS读取excel中数据并转为Json数组对象传递到后端实现批量导入功能。但是遗留下一个问题,就是表中的表头使用的是英文,非常的不方便,于是这次进行了改进。

导入的代码就不写了。主要是一个中英文转换的代码

既然要进行转换的是表头,想法是转换json数组对象,然后对json数组对象进行操作。在读到一个Sheet,并通过 XLSX.utils.sheet_to_json转为json对象之后进行转换

核心代码如下:

 weldmachine = XLSX.utils.sheet_to_json(workbook.Sheets[sheet], { range: 1 });
//中英文映射
var columnMapping = {
    '设备编号': 'machineNo',
    '设备品牌': 'machineBrand',
    '技术参数': 'techParams',
    '备注': 'comment'
};
	//string类型
	var jsonArrary = JSON.stringify(weldmachine); //是从一个对象中解析出字符串
	//object类型
	var excel = JSON.parse(jsonArrary);   //用于将一个 JSON 字符串转换为对象

	var newrows = [];
	//中英文转换
	weldmachine.forEach(function (row) {
   		 var newRow = {};
   		 Object.keys(row).forEach(function (key) {
        	//要是能在colmnMapping[key]中找到对应的英文,则变成对应的数据,否则还是用原来的
        	newRow[columnMapping[key] || key] = row[key];                       
    })
    	return newrows.push(newRow);
});

这里详细讲解一下newRow[columnMapping[key] || key] = row[key];

  1. nameMap 是一个包含中英文属性名映射关系的对象,例如 { '姓名': 'name', '年龄': 'age', '性别': 'gender' }
  2. key 是当前遍历到的属性名。
  3. nameMap[key] 表示将 keynameMap 对象中查找对应的英文属性名,如果找到了,那么返回这个英文属性名,否则返回 undefined
  4. || 表示逻辑或运算符,它的优先级比赋值运算符低。当 nameMap[key] 返回 undefined 时,逻辑或运算符会返回 key
  5. newRow[nameMap[key] || key] 表示将转换后的英文属性名或原属性名作为 newRow 对象的属性名。
  6. row[key] 表示获取 row 对象中当前属性名对应的属性值。
  7. = 表示赋值运算符,将 row[key] 的值赋给 newRow[nameMap[key] || key]

因此,这个语句的作用是将 row 对象中的属性名从中文转换为英文,并将转换后的属性名和属性值存储在 newRow 对象中。如果属性名没有在 nameMap 对象中找到对应的英文属性名,那么将使用原属性名作为英文属性名。

这里需要将转为英文后的数据保存到一个新的数组里,所以有newrows[],否则下次读取就会覆盖掉newRow[ ]
实际读取的数据:

在这里插入图片描述

想要传递到后端的数据(转换后):

在这里插入图片描述
将newRow序列化之后,通过ajax请求向后端发送数据,后端进行反序列化后做响应处理即可。
最后是成功导入。
如果有更好的方法,欢迎大佬提出!!!!

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以使用HTML5中的File API和JavaScript读取Excel文件并展示数据。以下是一个简单的例子: 1. HTML代码: ```html <input type="file" id="excelFile" onchange="handleFile(this)"> <table id="excelTable"></table> ``` 2. JavaScript代码: ```javascript function handleFile(e) { // 获取上传的文件 var file = e.files[0]; // 创建一个FileReader对象 var reader = new FileReader(); // 读取Excel文件 reader.onload = function(e) { var data = e.target.result; var workbook = XLSX.read(data, {type: 'binary'}); var sheet = workbook.Sheets[workbook.SheetNames[0]]; // 换为JSON格式 var json = XLSX.utils.sheet_to_json(sheet); // 渲染表格 renderTable(json); }; reader.readAsBinaryString(file); } function renderTable(data) { var table = document.getElementById("excelTable"); // 清空表格 table.innerHTML = ""; // 表头 var header = Object.keys(data[0]); var tr = document.createElement("tr"); header.forEach(function(key) { var th = document.createElement("th"); th.textContent = key; tr.appendChild(th); }); table.appendChild(tr); // 表格数据 data.forEach(function(row) { var tr = document.createElement("tr"); header.forEach(function(key) { var td = document.createElement("td"); td.textContent = row[key]; tr.appendChild(td); }); table.appendChild(tr); }); } ``` 这个例子使用了SheetJS库来处理Excel文件。需要先在HTML中引入SheetJS: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script> ``` 注意,这个例子只支持读取XLSX格式的Excel文件,如果要支持其他格式,需要修改代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

alonelone

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值