将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是可以初始化来生成的,

var blob = new Blob([base64Data], { type: "mime" })

然后就可以通过FileReader读取了,再接下来只需要按照demo的代码调用就可以了。。。

reader.readAsBinaryString(blob);

...

原文地址:https://www.cnblogs.com/listenfwind/p/8424162.html

时间: 2024-10-14 14:16:05

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

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

ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '&qu

Java 练习:读取该文件内容,并按照自然顺序排序后输出到 另一个文件中

package com.swift; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; public class IO_sort_content { public static void main(String[] args) { /* * 已知文件 a.txt 文件中的内容为"bcde

使用java技术将Excel表格内容导入mysql数据库

1.添加POI jar包到项目的lib目录下­2.Excel文件目录:d://excel.xls­3.数据库字段为:num1 num2 num3 num4 num5 num6­4.数据库名:blog­5.表名:test­6.编写类:连接mysql的字符串方法.插入的方法.实体类­­. import java.io.FileInputStream;­ import java.io.FileNotFoundException;­ import java.io.IOException;­ import

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

这个方法和上次写的读取txt文件的方法基本上差不多,直接贴代码,需要的直接拿走 function ImportExcel(){ $file = fopen('test.csv','r'); //输出文本中所有的行,直到文件结束为止. while($list = fgetcsv($file)) { $csvInfo['name'] = iconv('gb2312','utf-8',$list[0]); $csvInfo['age'] = iconv('gb2312','utf-8',$list[1

已知文件 a.txt 文件中的内容为“bcdeadferwplkou”, * 请编写程序读取该文件内容,并按照自然顺序排序后输出到 b.txt 文件中。 * 即 b.txt 中的文件内容应为“abcd…………..”这样的顺序。

import java.io.*;class SortChar{ private String str; private char arrayList[]; private BufferedReader br; //字符流 private File f; //读取的文件 SortChar( String s ) { f=new File( s ); } public void start() { if( inputData()==-1 ) { return; } //对字符数组进行冒泡排序 so

查看及检索文件

1.查看及检索文件 1.cd命令详解 切换 所在目录(相对于Windows中鼠标双击进入某个目录,直接查看目录下内容) 相对路径喝绝对路径 ? 相对路径:从当前路径开始表示位置:./为当前目录,../代表上一级路径? 绝对路径:从"/"开始完整表示路径的位置 例:表示"/etc/sysconfig/network-scripts/ifcfg-eth0"文件位置,当前位于"etc/"目录 相对路径 ./sysconfig/network-scrip

Kettle_使用资源库功能把ktr元数据统一存储到数据库中

原创作品,出自 "深蓝的blog" 博客,欢迎转载,转载时请务必注明出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/article/details/46117065 [目标] 利用kettle中的资源库功能,把ktr文件统一存储到数据库中,方便本地进行版本管理 ktr:使用kettle编辑的转换,被称为ktr: 转换:添加功能模块,实现ETL的项目称为转换. 一路确定后,点击ok完成资源库的创建,如下: 创建完成后,先进

读取Pdm文件内容

Pdm文件,就是PowerDesigner软件生成的文件,用来设计数据库表结构非常适合.其实,它的文件存储格式就是Xml,网上有很多代码,可以读取pdm文件内容.代码可以使用,但一般只能读取简单的pdm文件,如下图所示 好了,抛砖已完成.下面要引玉了,如果要读取下图这个pdm文件内容,网上的若干代码就不行了 最后,说下重点,已经我的加工整理,下面提供代码里可以读取上述这种复制格式的pdm文件.调用也非常简单.如下所示 string pdmFileFullName = @"E:\pdmTest.p

如何解决上传文件时文件内容相同

现在有这样一个需求:要求在上传文件时,凡是上传的文件,只要内容相同就只在服务器保存一份. 如何比较文件内容?如果当时思维受限,很难想到来比较文件内容的办法. 解决办法: 文件上传,肯定少不了用流来读文件,文件内容相同的根源就是:流读出来的字节码相同.这就想到了解决的办法,可是问题又来了.怎么比较字节码?想想那么长的字节码,如果用字符串的equals方法来比较,这不是一个好的解决办法.经过一番思考,我决定把流读出来的字节码进行MD5加密,用加密后的字符串来当作文件的文件名,然后在进行文件的上传(文