在线浏览 office 文档一直是个刚需，除了利用Office Web Apps 之外，我也探索了另外一种实现：将 office 文档转成 html，然后嵌入到可编辑的 iframe 中，同时解决浏览和编辑的问题，不过编辑特殊的东西肯定是不行的，比如图表之类的。
将 office 转成 html 用到了 jacob，在 Maven **仓库中的地址如下：
http://search.maven.org/#search%7Cga%7C1%7Cg%3A%22net.sf.jacob-project%22
由于我们可以把 iframe 制作成一个富文本编辑器，所以可以提供更多的编辑功能，如格式化等，或者直接借助已有的富文本编辑器来进行改造。我之前也写过一个简易的富文本编辑器来满足项目的要求，这里就不说 js 制作富文本编辑器的过程和细节了。
这里把一些相应的代码贴上来:
public static boolean WordToHtml(String sourceFile,String targetFile){
boolean result=false;
ComThread.InitSTA();
ActiveXComponent app = new ActiveXComponent("Word.Application");
try
{
app.setProperty("Visible", new Variant(false));
Dispatch docs = app.getProperty("Documents").toDispatch();
Dispatch doc = Dispatch.invoke(docs, "Open", Dispatch.Method,new Object[] { sourceFile, new Variant(false), new Variant(true) }, new int[1]).toDispatch();
Dispatch.invoke(doc, "SaveAs", Dispatch.Method, new Object[] {targetFile, new Variant(Const.WORD_TO_HTML) }, new int[1]);
Dispatch.call(doc, "Close", new Variant(false));
result=true;
}
catch (Exception e)
{
e.printStackTrace();
result=false;
}
finally
{
app.invoke("Quit", new Variant[]{});
ComThread.Release();
ComThread.quitMainSTA();
}
return result;
}
public static boolean HTMLToWord(String sourceFile,String targetFile) {
boolean result=false;
ComThread.InitSTA();
ActiveXComponent app = new ActiveXComponent("Word.Application");
try {
app.setProperty("Visible", new Variant(false));
Dispatch htmls = app.getProperty("Documents").toDispatch();
Dispatch html = Dispatch.invoke(htmls, "Open", Dispatch.Method, new Object[] { sourceFile, new Variant(false), new Variant(true) }, new int[1]).toDispatch();
Dispatch.invoke(html, "SaveAs", Dispatch.Method, new Object[] { targetFile, new Variant(Const.HTML_TO_WORD) }, new int[1]);
Variant f = new Variant(false);
Dispatch.call(html, "Close", f);
result=true;
} catch (Exception e) {
e.printStackTrace();
result=false;
} finally {
app.invoke("Quit", new Variant[] {});
ComThread.Release();
ComThread.quitMainSTA();
}
return result;
}
同样的道理，还可以实现excel、ppt 与 html 的互转。
function display(fileName){
var iframe=document.getElementById("WordContainer");
iframe.src="word/HtmlWord/"+fileName;
iframe.onload = iframe.onreadystatechange = function() {
if (this.readyState && this.readyState != 'complete') {
return;
}
else {
var iframeDocument = this.contentDocument || this.contentWindow.document;
iframeDocument.body.contentEditable=true;
}
}
$("#htmlid").val(fileName);
}
function saveWord(){
var iframe=document.getElementById("WordContainer");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
console.log(iframeDocument.body.innerHTML);
var htmlid=$("#htmlid")[0].value;
var htmlcontent=iframeDocument.body.innerHTML;
$.post("save",
{
htmlid:htmlid,
htmlcontent:htmlcontent
},
function(data,status){
console.log(data);
}
);
}
我的目的是想开发一款类似“百度 Doc” http://word.baidu.com/ 的东西，这样可以丰富、稳固自己的知识，目前正在抽时间筹备中(苦命的打工仔，天天加班)，欢迎各位拍砖、指导，谢谢。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent