通过 ZK Spreadsheet在线查看excel文件
潘国源
2023-12-01
通过 ZK Spreadsheet在线查看excel文件
ZK Spreadsheet是 http://www.zkoss.org/ 出品的LGPL的在线电子表格编辑器, 兼容excel
demo:http://zssdemo.zkoss.org/
文档:http://books.zkoss.org/wiki/ZK_Spreadsheet_Docs
快速启动:http://books.zkoss.org/wiki/ZK%20Spreadsheet%20Quick%20Start%20Guide/Quick%20Start/Create%20and%20Run%20Your%20First%20ZK%20Spreadsheet%20Application
第一阶段:
1.安装 ZK Studio( Create and Run Your MyZK Application with Eclipse and ZK Studio)
参考:http://books.zkoss.org/wiki/ZK_Installation_Guide/Quick_Start/Create_and_Run_Your_First_ZK_Application_with_Eclipse_and_ZK_Studio
2. 新建ZK工程里并测试运行。
第二阶段:
1.建立普通 Java Web 工程,导入 zk 工程所需的包,建立.zul 页面;
2.配置 web.xml 文件 ,具体配置详见附件 web.xml;
3.在线显示测试;
将要显示的文件的文件名传递给某zul 页面,服务器目录+"fileName" 传递给Spreadsheet插件 显示。
eg1. http://localhost:8080/zs/index.zul?fileName=HelloZSS.xlsx
或是嵌套在jsp 页面,通过iframe src 显示
eg2.http://localhost:8080/zs/a.jsp?fileName=HelloZSS.xlsx
4. 遗留问题
zk Spreadsheet 最大的优点就是 在线类似于对Office Excel 文件进行操作,但现在需求是可以让用户只浏览或是对文件进行编辑操作,对文件的禁用或只读进行设置操作困难,对此实现思路是 外层套用透明层蒙板,实现文件只浏览功能,但此方式浏览文件还是有问题,Excel 文件的滚动条同时也被盖住,文件浏览不能全部浏览。
第三阶段:
ZK Spreadsheet 在线浏览的Excel 文件实现了不可编辑功能(只读)。
解决途径:
Registering Editing Events ,即为Spreadsheet组件添加监听器。
步骤:
1 新建java 类 MainLayoutComposer 继承 抽象类GenericForwardComposer;
2 手动添加方法public void doAfterCompose(Component comp) throws Exception {},重写抽象类中的方法;
3 在doAfterCompose(Componet comp)方法中必须使用super.doAfterCompose(comp); 初始化和zul页面组件关联的属性。
部分代码:
public class EditingEventsComposer extends GenericForwardComposer {
/**
* zul组件对象映射
*/
private transient Spreadsheet ss;
private transient Textbox editBox;
// 初始化
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp); // 必须的,作用:变量和页面中zk组件绑定进行初始化变量
System.out.println("渲染后执行自定义初始化");
}
private void doStartEditingEvent(StartEditingEvent event) {
event.cancel(); // 取消编辑事件
}
public void onStartEditing$ss(StartEditingEvent event) {
System.out.println("单元格开始编辑 事件");
doStartEditingEvent((StartEditingEvent) event);
}
4. 在window组件里面使用apply属性关联到后台java类。
说明:把变量绑定到zk组件,变量名必须和zk组件id同名;
<window title="" border="normal" vflex="1" width="100%" apply="com.zk.web.EditingEventsComposer">
<spreadsheet src="${filePath}" id="ss" maxrows="200"
maxcolumns="40" vflex="1" width="100%"></spreadsheet>
</window>
</zk>