在线电子表格spreadsheet操作实现
最近公司的业务需要在浏览器中使用mircosoft的owc中的在线电子表格功能,也就是spreadsheet这个控件
看了一段间的API,做了一些测试,下面就写一简单的操作,希望能给有需要的朋友一些帮助
概述:
整个功能是一个通过在WEB页面中编辑Excel,然后,保存到数据中,包括:读取和修改保存操作
前台与后台主要采用json格式进行数据交换,JAVA中使用了,org.json JAR包,大家可以自己去下载
过程
1,前台
JSP:
<script src="../common/json.js"></script>
<script src="../common/ExcelUtils.js" ></script>
<script language="javascript">
window.onload = function(){
var spreadSheet = document.getElementById("mySpreadsheet");
var reportFilePath = "bsfc2gufen/reportTemplate.xml";
var url = "pages/rp/template.jsp?path=" + reportFilePath ;
try {
spreadSheet.XMLURL = "RpGetXMLStreamServlet?path="+reportFilePath;
spreadSheet.refresh();
} catch (ex) {
alert("文件未找到");
}
//设置spreadsheet控制的ID号
setSpreadsheetId("mySpreadsheet");
//设置Excel中所要显示的字段名
var fields = ["payfileTypeName","payfileCheckName","beginUser","custName"];
setJSONFields(fields);
}
//从服务器查询数据
function getServerData(){
getDataFromServer('TestAction.do', 'name=data');
}
//保存客户端需要修改的数据
function save(){
saveJSONRecord('tnbaccount');
}
</script>
</head>
<body>
<table id="mainFrameTable" width="100%" height="60%" cellpadding=1
cellspacing=0>
<tr height=100%>
<td id="rightContent" width=100% vAlign="top">
<div style="overflow:hidden;width:100%"><object
id="mySpreadsheet"
classid="CLSID:0002E559-0000-0000-C000-000000000046"
style="width:100%;height:400"> </object></div>
</td>
</tr>
</table>
<button onclick="getServerData()">得到服务器端数据</button>
<button onclick="save()">保存数据</button>
<script for="mySpreadsheet" event="sheetchange">
changeSheet();
</script>
<script for="mySpreadsheet" event="StartEdit">
json_temp = mySpreadsheet.activecell.value;
</script>
其中要引入两个js文件,一个是json的js,一个是我自己写的js,主要用来处理前后台的数据部分,其中的ajax部分,我参考了坛子的一位网友改写而来的.
主要说明:
(1)window.onload
主要用于加载spreadsheet对象所需要的模板,注意这里的模板只能excel的xml形式的文件(在excel文件保存的时候,选择文件类型为xml表格数据即可)
(2)设置spreadsheet控制的ID号
是必须的
(3)设置Excel中所要显示的字段名
是必须的
(4)<object id="mySpreadsheet"
classid="CLSID:0002E559-0000-0000-C000-000000000046"
style="width:100%;height:400"> </object>
主要用就是用来加载spreadsheet这个excel控件
最下面是两个spreadsheet事件的监听
2.后台JAVA部分:
PrintWriter pw = null;
OutputStream os = null;
InputStream in = null;
String path = request.getSession().getServletContext().getRealPath("/");
logger.info("----path-----"+path);
File file = new File(path+filepath);
//文件不存在处理
if(!file.exists()){
pw = (PrintWriter)response.getWriter();
logger.info(path+filepath+"文件不存在");
try{
StringBuffer buffer = new StringBuffer();
buffer.append("<script>");
buffer.append("alert('文件"+path+filepath+"')");
buffer.append("<script>");
pw.write(buffer.toString());
pw.flush();
buffer = null;
}catch(Exception e){
throw new Exception(e);
}finally{
if(null != pw)
pw.close();
}
return null;
}
try{
response.setContentType("application/unknown");
response.addHeader("Content-Disposition", "attachment; filename=reportTemplate.xml" );
os = response.getOutputStream();
in = new FileInputStream(file);
byte btyes[] = new byte[1024];
for(int len = 0; (len = in.read(btyes)) != -1;)
os.write(btyes, 0, len);
}catch(Exception e){
e.printStackTrace();
}finally{
os.flush();
if(null != in)
in.close();
if(null != os)
os.close();
}
return null;
上述是一struts的action继承类，主要用于加载excel的xml模板,当然，你也可以使用全URL在页面中直接指定，也可以
req.setCharacterEncoding("utf-8");
String jsonString = req.getParameter("tnbaccount");
JSONObject jsonObject = new JSONObject(jsonString);
JSONArray array = jsonObject.getJSONArray("tnbaccount");
JSONObject temp = null;
Map map = null;
for(int i = 0; i < array.length(); i++){
temp = (JSONObject)array.get(i);
map = ConvertJSONObject.convertToMap(temp);
log.info(map);dao.save(map);
}
PrintWriter pw = res.getWriter();
pw.write("保存成功!");
pw.flush();
pw.close();
return null;
这个类主要接收客户端发来的保存请求，这里面我直接把JSON对象，转化成一个个的MAP对象，进行保存，当然你也可以自己把JSON对象转化成自己所需要的对象。ConvertJSONObject这个类是我自己写的，很简单，就是对JSON对象进行遍历，然后再组织成Map对象。不就贴出来了
以上代码只考虑实现，没有考完好的内存异常处理等
关于ExcelUtils.js内容，请看附件内容。另外，附件里还包括了一个spreadsheet控制的API文档
注意：以上内容只是自己研究的一点内容，不正确的，请大家指定。