本文主要讲前端内容, 后端涉及较少, 可以认为是使用 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