前端实现Excel表格数据导入和提交功能(一)

原创
10/10 11:11
阅读数 536

实现基本的Excel文件选择和解析功能

准备工作

1.下载xlsx.js库。

下载地址:https://github.com/SheetJS/sheetjs

下载sheetjs开源项目

将下载文件中dist目录下的xlsx.core.min.js文件复制至前端项目中。

sheetjs项目目录展示1

sheetjs项目目录展示2

2.下载或者引入jQuery库(以3.5.1版本为例)。

下载地址:https://www.jq22.com/jquery/jquery-3.5.1.zip

下载完成后解压,将目录中的jquery-3.5.1.min.js文件复制至前端项目中。

若不想下载,也可直接使用jQuery官网地址进行引用。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

制作Excel表格

Excel表格展示

编写页面

js脚本的引用路径为示例路径,请根据自己项目和文件路径进行修改。

通过xlxs.js库实现Excel表格解析的主要步骤和思路:

1.页面中加入文件选择表单控件

2.监听文件控件的选择变更事件,并绑定自定义处理方法

3.读取表格数据

4.获取指定工作表对象

5.获取工作表中的单元格对象

6.遍历除表头以外的单元格进行取值

注:对于没有填充数据的单元格,解析时不会创建代表该单元格的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>前端解析并提交Excel表格数据演示</title>
	</head>
	<body>
		<!-- 文件控件,必要的标签 -->
		<input type="file" accept=".xlsx, .xls" id="uploadFile" />
		<!-- 引入Excel处理工具库xlsx.js,解析Excel就靠它了 -->
		<script src="../../js/xlsx.core.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入jQuery库,放便操作DOM元素 -->
		<script src="../../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 脚本,实现选择Excel文件后解析数据并封装成对象 -->
		<script type="text/javascript">
			/**
			 * 解析Excel数据并封装成对象
			 * @param {Object} file 文件对象
			 */
			function readExcelFromLocalFile(file) {
				console.log("开始解析……");
				let xlsReader = new FileReader();
				xlsReader.onload = function(e) {
					let data = e.target.result;
					// 读取Excel数据,按照BinaryString格式进行读取
                    // type属性的其余可选值:base64、string(UTF-8编码的字符串)、buffer(Node.js中的Buffer类)、array(8位无符号整型数组)、file(仅在Node.js中支持)
					let workbook = XLSX.read(data, {
						type: 'binary'
					});
					// 获取当前Excel中第一张工作表的表名
					let sheetName = workbook.SheetNames[0];
					// 获取第一张工作表对象
					let sheet = workbook.Sheets[sheetName];
					const attrName = '!ref';
					// 获取第一张工作表的内容对象(即工作表对象中 !ref 属性的值)
					let ref = sheet[attrName];
					// 使用正则匹配表格数据
					let refArr = /([A-Z]+)([0-9]+):([A-Z]+)([0-9]+)/i.exec(ref);
					if (refArr != null) {
						// 定义表头行数量
						const HEAD_LEN = 2;
						// 定义数据集
						let datas = new Array();
						// 遍历有效数据行
						for (let i = HEAD_LEN + 1; i <= refArr[4]; i++) {
							try{
								let item = {
									id: sheet['A' + i].v, // 序号
									name: sheet['B' + i].v, // 姓名
									gender: sheet['C' + i].v, // 性别
									age: sheet['D' + i].v, // 年龄
									phone: sheet['E' + i].v // 联系方式
								};
								datas.push(item);
							}catch(e){
								console.log("解析遇到单元格为空!第【" + i + "】行数据解析失败!");
							}
						}
						console.log("解析完成!");
						console.log("解析结果:");
						console.log(datas);
					} else {
                        console.log("该工作表无有效数据!");
                    }
				};
				// 按照BinaryString格式读取Excel文件
				xlsReader.readAsBinaryString(file);
			}
			
			/**
			 * 定义文件控件变更事件处理方法
			 * @param {Object} e 事件对象
			 */
			function handleFile(e) {
				let files = e.target.files;
				readExcelFromLocalFile(files[0]);
			}
			
			/**
			 * 添加事件句柄
			 */
			function addEventListener() {
				let uploadFile = $('#uploadFile');
				if (uploadFile) {
					uploadFile.on('change', handleFile);
				}
			}
			addEventListener();
		</script>
	</body>
</html>

效果演示

解析功能演示1

解析功能演示2

解析功能演示3

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部