excel可以作为mysql的前端吗_将excel文件内容存储到数据库，并可以实时在前端查看（不必生成文件）...

版权声明：本文为博主原创文章，未经博主允许不得转载

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

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

或点此选择文件

按钮

然后是对应的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来用，

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

下载后解压是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中引用如下，

commons-codec

commons-codec

1.10

再调用其一个方法，

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

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

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

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

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