PagePlug低代码开发入门教程——在系统中上传excel文件_pageplug添加数据后更新表格-CSDN博客

本文链接：https://blog.csdn.net/AppsmithCN/article/details/132676718

一、背景介绍

在企业的系统开发场景中，Excel文件（xls、xlsx、csv）的处理是一个比较常见的功能，例如：

将数据导入导出，与其他外部系统、合作伙伴进行数据交换、生成报表进行分析等
将数据清洗转换，将excel文件中的数据按照预定义的规则和映射，使其适应系统的数据模型和规范等
数据校验和验证，确保导入的数据不会破坏系统数据的完整性等

本次案例将详细讲解如何配置一个如何使用低代码PagePlug实现CSV文件导入功能，通过编写JavaScript代码来将CSV数据转换成JSON格式数据。并且在后续项目迭代中，只需在JSobject中修改即可同步更新，迭代真轻松～～

案例原文件在gitee、github仓库上的demo文件中都可找到（/demo/入门案例/JSobject相关）

二、案例实操

案例会介绍2块的内容

对csv格式的数据转换为JSON格式
上传的数据进行合并，在新的表格组件中展示

2.1 对csv格式的数据进行转换

在JSobject里面，我们新建一个名为Helper的对象

代码如下👇

export default {
	csvJSON: (csv) => {

  var lines=csv.split("\n");

  var result = [];

  var headers=lines[0].split(",");

  for(let i=1;i<lines.length;i++){

	  var obj = {};
	  var currentline=lines[i].split(",");

	  for(var j=0;j<headers.length;j++){
		  obj[headers[j]] = currentline[j];
	  }

	  result.push(obj);

  }
  //return result; //JavaScript object
  return result; //JSON
},
	
	fileUploader: (fp) => {
	if (!fp.files.length) return '';
		const objArr=this.csvJSON(fp.files[0].data);
		return (objArr == []) ? '' : objArr;
}
}

这段代码包含了两个方法：csvJSON 和 fileUploader：提供了 CSV 数据转换为 JSON 格式的方法和文件上传的方法，最后将上传的 CSV 文件转换为 JSON 对象数组

csvJSON: 首先，代码通过换行符将 CSV 数据拆分成多行，并将每行存储在 lines 数组中。然后，它通过逗号将第一行（表头）拆分成多个列，并将列名存储在 headers 数组中。接下来，代码从第二行开始遍历每一行，将每一行数据拆分成多个列，并将列名与对应的值组合成一个 JavaScript 对象 obj。最后，将该对象添加到 result 数组中。最终，方法返回转换后的 JSON 数据。
fileUploader: 这个方法用于处理文件上传操作。它接收一个 fp 参数，表示文件上传的对象。首先，代码检查是否存在上传的文件，如果没有文件则直接返回空字符串 ''。如果存在文件，它将调用 csvJSON 方法，并将文件的数据作为参数传递给该方法，将 CSV 数据转换为 JSON 对象数组 objArr。最后，方法会检查 objArr 是否为空数组，如果是空数组则返回空字符串 ''，否则返回转换后的 JSON 对象数组。

给表格组件绑定数据

在画布中，我们可以拖入文件上传组件（FilePicker）和表格组件（Table），并且对表格组件绑定数据

通过Helper中的fileUploader方法来接收FilePicker1组件

之后我们可以上传一个csv文件测试下，上传文件大功告成～～～

2.2 对上传的csv文件数据进行合并

在JSobject里面，我们新建一个名为Merge的对象

代码如下👇

export default {
	mergeJSON: (obj1, obj2) => {
		let mergedJSON = [];
		for (let i=0; i<obj1.length; i++){
				for (let j=0; j<obj2.length; j++){
					let mergedObj = {};
						if (obj1[i].id==obj2[j].id){
							mergedObj = {...obj1[i], ...obj2[j]};
							mergedJSON.push(mergedObj);
					}	
		}
			
	}
		return mergedJSON;
	}
}

这段代码主要将两个 JSON 对象数组按照它们的id属性进行合并，并返回合并后的结果数组。

具体的合并过程如下：

创建一个空数组 mergedJSON，用于存储合并后的结果。
使用两个循环嵌套，分别遍历 obj1 和 obj2 中的元素。
在每次循环中，创建一个空对象 mergedObj，用于存储合并后的对象。
判断当前遍历到的 obj1 和 obj2 元素的 id 属性是否相等。
如果 id 相等，则将 obj1[i] 和 obj2[j] 的属性合并到 mergedObj 中，使用展开运算符 {...obj1[i], ...obj2[j]}。
将合并后的 mergedObj 添加到 mergedJSON 数组中。
循环结束后，返回合并后的 mergedJSON 数组作为结果。