通過 ZK Spreadsheet在線查看excel文件

通過 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>