本帖最后由 Clark.Pan 于 2024-11-21 10:00 编辑
本demo通过SpreadJS的前端导出导出与JAVA后端结合,实现分从服务器端导入Excel与导出Excel保存至服务器端这两个功能:
从服务器端导入Excel:
这部分使用纯前端实现。然后下载到前端直接打开,核心代码如下:- var excelIo = new GC.Spread.Excel.IO();
- var excelFilePath = 'resources/Excel/importExcel.xlsx';
- var xhr = new XMLHttpRequest();
- xhr.open('GET', excelFilePath, true);
- xhr.responseType = 'blob';
- xhr.onload = function(e) {
- if (this.status == 200) {
- // get binary data as a response
- var blob = this.response;
- // convert Excel to JSON
- excelIo.open(blob, function (json) {
- var workbookObj = json;
- spread.fromJSON(workbookObj);
- }, function (e) {
- // process error
- alert(e.errorMessage);
- }, {});
- }
- };
-
- xhr.send();
复制代码
导出Excel保存至服务器端:
这部分使用前端导出功能与后端java结合的方式来实现,首先通过前端Excel导出,生成导出文件,然后通过formdata来承载导出文件,之后通过ajax将formdata传至后端java。后端java使用文件操作将文件保存至服务器端。
这里有以下需要注意的地方:
formdata没有办法改变enctype,而我们需要的用entype为multipart/form-data类型的form来承载导出文件。这里需要在jsp页面上创建一个空的form,并将其entype设置为multipart/form-data:
- <form name="myform" id="myform" enctype="multipart/form-data" method="post"></form>
复制代码 之后js中只需要初始化一个该form的formdata实例即可:
- var fd = new FormData(document.forms.namedItem("myform"));
复制代码 全部代码已经上传附件,可以下载进行参考。
|
|