使用JavaScript读取excel表格数据并导入到数据库_js导入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是异步的，再配合定时器，可以完美的控制程序。

最终实现效果如下：