将excel文件内容存储到数据库,并可以实时在前端查看(不必生成文件)

时间:2022-12-09 16:45:28

本文主要讲前端内容,后端涉及较少,可以认为是使用Java。

首先是excel文件上传,这个较为简单,可以html5的数据接口FormData()进行操作。具体代码如下:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="file" id="_file" value=""/><p for="file">或点此选择文件</p>
     <button id = "file_button" >按钮</button>
</body>
</html>

然后是对应的javascript

$("#button").click(function(){
var files = $('#_file').prop('files');
var data = new FormData();
data.append("upload",files[0]); //因为是只选择一个文件,故而只取file[0]
$.ajax({
url: yourPath,
type: 'POST',
data: data,
cache: false,
dataType:'text',
processData: false,
contentType: false,
success: function(result) {
// Do something with the result
alert("成功");
},
error : function(result){
alert("失败"+result.toString());
}
}); });

后端接收到文件之后,将其存储成二进制数组,在数据库中,比如postgresql,使用blob数据类型,然后在java中使用byte数组映射就可以了。

那么怎么从后端存储的文件内容直接在页面上excel呢?这里需要用到sheetJs,官网:http://sheetjs.com/,可以直接取其demo来用,

demo下载地址放在github上了:https://github.com/SheetJS/SheetJS.github.io。

在这里是直接使用它的一些代码,主要说说思路。

下载后解压是SheetJS.github.io-master文件夹,在而显示生成excel的Js代码主要在SheetJS.github.io-master\assets\js\dropsheet.js中。其中发下其最后是通过调用该文件中以下代码

function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
if(pending) return opts.errors.pending();
var files = e.dataTransfer.files;
var i,f;
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
var name = f.name;
reader.onload = function(e) {
var data = e.target.result;
var wb, arr;
var readtype = {type: rABS ? 'binary' : 'base64' };
if(!rABS) {
arr = fixdata(data);
data = btoa(arr);
}
function doit() {
try {
if(useworker) { sheetjsw(data, process_wb, readtype); return; }
wb = XLSX.read(data, readtype);
process_wb(wb);
} catch(e) { console.log(e); opts.errors.failed(e); }
} if(e.target.result.length > 1e6) opts.errors.large(e.target.result.length, function(e) { if(e) doit(); });
else { doit(); }
};
if(rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
}
}

说明:SheetJs这个demo中,解析excel使用的是js-xlsx这个库,这个库对excel的操作很多,解析只是一个方面,具体可以上github上看。而根据解析在html上绘制excel表格的是canvas-datagrid.js这个表格控件。

可以看到它是通过FileReader的readAsBinaryString方法读取每个选中的文件,根据文件内容在html中绘制出excel表格,那么我们只要在这里自己从后端接收那个二进制数据,生成一个File对象,再跑同样这段代码就OK。

这个过程中碰到两个问题:

一个就是后端的byte数组传递到前端很不方便,而且我在用ajax传递的时候,二进制数组参数会变成string型。

另一个就是javascript中无法直接新建一个File对象。。

首先第一个问题,二进制数组不能传递,那么就只能传递字符串了,但是不能直接转字符串,那么有什么办法呢?再上面的代码看到,里面有一句

var readtype = {type: rABS ? 'binary' : 'base64' };

说明这个操作可以操作base64编码的字符串,那就是转成base64,这个需要引入apache的一个包,包名为commons-codec,再Maven中引用如下,

<!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>

再调用其一个方法,

Base64.encodeBase64String(byteArray);   //将byteArray转为base64字符串

这样就可以传输到前端了。

再说第二个问题,通过百度发现,javascript有一种数据类型Blob,而File正是基于这种Blob的。

一个Blob对象就是一个包含有只读原始数据的类文件对象

但是Blob是可以初始化来生成的,

var blob = new Blob([base64Data], { type: "mime" })
然后就可以通过FileReader读取了,再接下来只需要按照demo的代码调用就可以了。。。
reader.readAsBinaryString(blob);
 
...