将excel文件内容存储到数据库，并可以实时在前端查看（不必生成文件）
本文主要讲前端内容，后端涉及较少，可以认为是使用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是可以初始化来生成的，
将excel文件内容存储到数据库，并可以实时在前端查看（不必生成文件）的更多相关文章
- js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中
ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...
- Java&mysql：过滤文件内容，将新文件内容存入mysql数据库
在上一篇博文jdbc连接数据库中我已经简单介绍了如何连接到mysql数据库,今天要总结的是学长给我布置的一个小作业,把一个很大的已经用","分开了的一行一行的txt文件内容过滤掉注 ...
- Java基础面试操作题：读取该文件内容，并按照自然顺序排序后输出到 另一个文件中
package com.swift; import java.io.FileInputStream; import java.io.FileNotFoundException; import java ...
- 使用gcc不同选项来编译查看中间生成文件
gcc编译C程序的总体流程如下图 用到的命令如下: .c---> .i gcc -E hello.c .c--->.s gcc -S hello.c .c--->.o gcc -c ...
- Yii 读取CVS文件内容插入到数据库
这个方法和上次写的读取txt文件的方法基本上差不多,直接贴代码,需要的直接拿走 function ImportExcel(){ $file = fopen('test.csv','r'); //输出文 ...
- Eclipse中java文件边的黄色数据库标志变成了蓝色小勾，导致文件修改后无法显示在Git staging窗口中，修改无法提交，怎么解决？
出现这个问题的原因是误点击了右键点文件->Team->Advanced->Assume Unchanged, 导致结果是文件修改了无法显示在Git staging窗口中,自然无法提交 ...
- java读取大文件内容到Elasticsearch分析（手把手教你java处理超大csv文件）
现在需要快算分析一个2g的csv文件: 基于掌握的知识,使用java按行读取文件,批量导入数据到es, 然后利用es强大的聚合能力分析数据,2个小时搞定! package com.example.de ...
- 【Oracle】10g查看trace生成文件位置及文件名称
select u_dump.value || '/' || db_name.value || '_ora_' || v$process.spid || nvl2(v$process.trace ...
- NodeJs之EXCEL文件导入导出MongoDB数据库数据
NodeJs之EXCEL文件导入导出MongoDB数据库数据 一,介绍与需求 1.1,介绍 (1),node-xlsx : 基于Node.js解析excel文件数据及生成excel文件. (2),ex ...
随机推荐
- bzoj 2806: [Ctsc2012]Cheat
传送门 好久没刷bzoj惹…… 题意不说可以嘛. 首先二分答案. SAM的事情搞完以后就是dp辣. 我们已经对于每个位置i,找到了最小的一个k,使得[k,i]这个子串在模版串中出现过.那么我们需要做的 ...
- AIM Tech Round 4 (Div. 2)(A，暴力，B，组合数，C，STL+排序)
A. Diversity time limit per test:1 second memory limit per test:256 megabytes input:standard input o ...
- bzoj:3400 [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队
Description 农夫顿因开始玩飞盘之后,约翰也打算让奶牛们享受飞盘的乐趣．他要组建一只奶牛飞盘 队．他的N(1≤N≤2000)只奶牛,每只部有一个飞盘水准指数Ri(1≤Ri≤10000 ...
- hash算法 (hashmap 实现原理)
Hash ,一般翻译做" 散列" ,也有直接音译为" 哈希" 的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出 ...
- 基于Echarts4.0实现旭日图
昨天Echarts4.0正式发布,随着4.0而来的是一系列的更新,挑几个主要的简单说明: 1.展示方面通过增量渲染技术(4.0+)ECharts 能够展现千万级的数据量 2.针对移动端优化,移动端小屏 ...
- Android开发之漫漫长途 XII——Fragment详解
该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...
- 解决导入MySQL数据库提示"Unknown character set: 'utf8mb4'"错误
今天老左在准备迁移公司一个客户的网站到另外一台服务器中,根据正常的操作备份最新的网页文件和导出数据库,然后在新服务器中创建站点和数据库wget迁移进去解压.因为数据库比较小,所以直接用PHPMyAdm ...
- 第一个ServiceStack服务框架
第一个ServiceStack服务框架 最近刚接触ServiceStack,就尝试着写了第一个服务框架,难免出错,还望同道们多多指正. 关于ServiceStack相关的概念不在做详细的叙述,网上研究 ...
- 武侠--生活--java
一.名词解释 1.向上转型 大白话:村支书通知你爸去大队领过年发的面粉,结果你爸不在家,你装成你爸去了,村支书一看,行,你具有你爸的所有功能,就给了你. 官方解释:子类引用的对象转换为父类类型称为向上 ...
- spring使用c3p0报错
java.sql.SQLException: Connections could not be acquired from the underlying database! at com.mchang ...