使用JavaScript读取excel表格数据并导入到数据库

将excel表格导入到数据库,有多种办法,可以使用数据库管理工具,可以使用python写个脚本,也可以用java开发个小功能,还可以用php来开发。但是当条件受限的时候,没有工具,没有脚本运行环境,这几个现成的方法都无法施展。唯独javascript还能自由的运行,只能基于JavaScript来写脚本,读取excel文件,然后导入到数据库。

1、先准备两个知识点:

H5赋予了JavaScript读取本地文件的能力。

HTML5技术出现以后,提供了从本地读取文件的API,因此可以在前端使用JavaScript脚本调用HTML5的API来读取本地文件。

SheetJS能够在前端操作excel

SheetJS有一个社区版本,是纯JS的可以读取和到处excel的工具库。

2、开始写脚本。

制作一个html页面,放一个上传文件的input和一个提交按钮。

<input type="file" name="xlfile" id="xlf" /> ... or click here to select a file
<input type="button" name="btn" id="btn" value="import" onclick="aimport()"/>

提交按钮绑定一个onclick动作,当点击按钮的时候触发aimport(),aimport()获取到文件对象,并调用do_file来处理文件对象。

function aimport(){
	var files = $("input[name=xlfile]")[0].files;
	do_file(files);
}

do_file里用到了FileReader,这是HTML5支持的一个文件阅读器,读取文件内容传递给SheetJS处理。

var do_file = (function() {
	return function do_file(files) {
		rABS = false;
		var f = files[0];
		var reader = new FileReader();
		reader.onload = function(e) {
			var data = e.target.result;
			if(!rABS) data = new Uint8Array(data);
			process_wb(X.read(data, {type: rABS ? 'binary' : 'array'}));
		};
		if(rABS) reader.readAsBinaryString(f);
		else reader.readAsArrayBuffer(f);
	};
})();

process_wb方法分为两个步骤,先将数据里的excel的工作表读出来,并转换为json对象。

var to_json = function to_json(workbook) {
		var result = {};
		workbook.SheetNames.forEach(function(sheetName) {
			var roa = X.utils.sheet_to_json(workbook.Sheets[sheetName], {header:1});
			if(roa.length) result[sheetName] = roa;
		});
		return JSON.stringify(result, 2, 2);
	};

然后循环读取json对象的每条数据,使用Jquery的ajax功能,构造数据结构,提交给制定的api,完成数据的导入。

    
output = to_json(wb); break;
output_obj = JSON.parse(output);
vals = output_obj['打印机'];
vals_length= vals.length-1;
console.log(vals_length);
var i=1;
ref = setInterval(function(){
	if(i==vals_length){
	clearInterval(ref);				
	}			
	console.log(vals[i]);
	value = vals[i];
	var datastring = '';
	datastring = {
		'userId':'',
		'ip':value[6],
		'mac':value[7],
		'name':value[9],
		'storagePlace':value[11],
		'office':value[1],
		'department':'',
		'user':value[12],
		'passport':value[13],
		'purpose':value[14]==1?'communal':'personal',
		'isRadiate':value[10]==1?'true':'false',
		'note':value[15]
	};
	$.ajax({
		type: "POST",
		url: "http://localhost:8080/api/printer",	
		data: datastring,
		dataType: "json",
		success: function(msg) {
			console.log(msg);
		} 		
	});

	i=i+1;
	
},1000);

ajax是异步的,再配合定时器,可以完美的控制程序。

最终实现效果如下:

 

  • 5
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值