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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     </head>
  5.     <body>
  6.         <input type="file" id="_file" value=""/><p for="file">或点此选择文件</p>    
    　　　　　<button id = "file_button" >按钮</button>
  7.     </body>
  8. </html>

然后是对应的javascript

  1. $("#button").click(function(){
  2.   var files = $('#_file').prop('files');
  3.   var data = new FormData();
  4.   data.append("upload",files[0]); //因为是只选择一个文件，故而只取file[0]
  5.   $.ajax({
  6.     url: yourPath,
  7.     type: 'POST',
  8.     data: data,
  9.     cache: false,
  10.     dataType:'text',
  11.     processData: false,
  12.     contentType: false,
  13.     success: function(result) {
  14.                 // Do something with the result
  15.         alert("成功");
  16.     },
  17.     error : function(result){
  18.         alert("失败"+result.toString());
  19.     }
  20.   });
  21.  
  22. });

后端接收到文件之后，将其存储成二进制数组，在数据库中，比如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中。其中发下其最后是通过调用该文件中以下代码

  1. function handleDrop(e) {
  2.         e.stopPropagation();
  3.         e.preventDefault();
  4.         if(pending) return opts.errors.pending();
  5.         var files = e.dataTransfer.files;
  6.         var i,f;
  7.         for (i = 0, f = files[i]; i != files.length; ++i) {
  8.             var reader = new FileReader();
  9.             var name = f.name;
  10.             reader.onload = function(e) {
  11.                 var data = e.target.result;
  12.                 var wb, arr;
  13.                 var readtype = {type: rABS ? 'binary' : 'base64' };
  14.                 if(!rABS) {
  15.                     arr = fixdata(data);
  16.                     data = btoa(arr);
  17.                 }
  18.                 function doit() {
  19.                     try {
  20.                         if(useworker) { sheetjsw(data, process_wb, readtype); return; }
  21.                         wb = XLSX.read(data, readtype);
  22.                         process_wb(wb);
  23.                     } catch(e) { console.log(e); opts.errors.failed(e); }
  24.                 }
  25.  
  26.                 if(e.target.result.length > 1e6) opts.errors.large(e.target.result.length, function(e) { if(e) doit(); });
  27.                 else { doit(); }
  28.             };
  29.             if(rABS) reader.readAsBinaryString(f);
  30.             else reader.readAsArrayBuffer(f);
  31.         }
  32.     }

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

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

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

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

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

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

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

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

  1. <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->
  2. <dependency>
  3.     <groupId>commons-codec</groupId>
  4.     <artifactId>commons-codec</artifactId>
  5.     <version>1.10</version>
  6. </dependency>

再调用其一个方法，

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

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

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

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

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

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

将excel文件内容存储到数据库，并可以实时在前端查看（不必生成文件）的更多相关文章

  1. js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中

    ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId ...

  2. Java&mysql：过滤文件内容，将新文件内容存入mysql数据库

    在上一篇博文jdbc连接数据库中我已经简单介绍了如何连接到mysql数据库,今天要总结的是学长给我布置的一个小作业,把一个很大的已经用","分开了的一行一行的txt文件内容过滤掉注 ...

  3. Java基础面试操作题：读取该文件内容，并按照自然顺序排序后输出到 另一个文件中

    package com.swift; import java.io.FileInputStream; import java.io.FileNotFoundException; import java ...

  4. 使用gcc不同选项来编译查看中间生成文件

    gcc编译C程序的总体流程如下图 用到的命令如下: .c---> .i gcc -E hello.c .c--->.s gcc -S hello.c .c--->.o gcc -c ...

  5. Yii 读取CVS文件内容插入到数据库

    这个方法和上次写的读取txt文件的方法基本上差不多,直接贴代码,需要的直接拿走 function ImportExcel(){ $file = fopen('test.csv','r'); //输出文 ...

  6. Eclipse中java文件边的黄色数据库标志变成了蓝色小勾，导致文件修改后无法显示在Git staging窗口中，修改无法提交，怎么解决？

    出现这个问题的原因是误点击了右键点文件->Team->Advanced->Assume Unchanged, 导致结果是文件修改了无法显示在Git staging窗口中,自然无法提交 ...

  7. java读取大文件内容到Elasticsearch分析（手把手教你java处理超大csv文件）

    现在需要快算分析一个2g的csv文件: 基于掌握的知识,使用java按行读取文件,批量导入数据到es, 然后利用es强大的聚合能力分析数据,2个小时搞定! package com.example.de ...

  8. 【Oracle】10g查看trace生成文件位置及文件名称

    select  u_dump.value || '/' ||  db_name.value || '_ora_' ||  v$process.spid ||  nvl2(v$process.trace ...

  9. NodeJs之EXCEL文件导入导出MongoDB数据库数据

    NodeJs之EXCEL文件导入导出MongoDB数据库数据 一,介绍与需求 1.1,介绍 (1),node-xlsx : 基于Node.js解析excel文件数据及生成excel文件. (2),ex ...

随机推荐

  1. 终于理解kalman滤波

    2017拜拜啦,怎么过元旦呢?当然是果断呆实验室过... 应该是大二的时候首次听说kalman,一直到今天早上,我一看到其5条"黄金公式",就会找各种理由放弃,看不懂呀...但是研 ...

  2. 【Java学习笔记之二十七】Java8中传多个参数时的方法

    java中传参数时,在类型后面跟"..."的使用:        public static void main(String[] args){       testStringA ...

  3. Java面向对象接口的应用实例练习

    interface USB { public void open(); public void close(); } class Upan implements USB { public void o ...

  4. HDU 1847 Good Luck in CET-4 Everybody!(规律，博弈)

    Good Luck in CET-4 Everybody! Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  5. Codeforces 626D Jerry's Protest(暴力枚举+概率)

    D. Jerry's Protest time limit per test:2 seconds memory limit per test:256 megabytes input:standard ...

  6. DFS(dfs)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2212 DFS Time Limit: 5000/2000 MS (Java/Others)    Me ...

  7. 微信小程序开发官方文档解读

    创建页面 在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下.微信小程序中的每一个页面的[路径+页面名]都需要写在 app ...

  8. js根据出生年月日换算年龄

    function age_Conversion(date) { debugger var age = ''; var str = date.replace(/年|月/g, "-") ...

  9. 如何在vue中使用sass

    使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --sav ...

  10. JXLS 2.4.0系列教程（四）——拾遗 如何做页面小计

    注:阅读本文前,请先阅读第四篇文章. http://www.cnblogs.com/foxlee1024/p/7619845.html 前面写了第四篇教程,发现有些东西忘了讲了,这里补回来. 忘了讲两 ...