我對這個功能的理解是:拿到你想要顯示的信息,寫入到一個臨時文件當中去以便插件進行編輯。把臨時文件的相對路徑傳到頁面去。頁面拿到這個要顯示的文檔的相對路徑對文檔進行編輯在Word文檔里面顯示出來
后台代碼部分:
@RequestMapping("check")
public String check(String wid,Model model,HttpServletResponse response,HttpServletRequest request) throws IOException{
UUidUtil uuid = new UUidUtil();
String uid = uuid.getUid();//去掉"-"的32位uuid
String fileName = "";//文件名稱
String fileUrl = "";//文件路徑
String absoluteOfficeFileDir = request.getServletContext().getRealPath("/")+ "resources/uploadOfficeFile"; //office文件的絕對路徑
String relativeOfficeFileUrl = "../resources/uploadOfficeFile"; //office文件訪問的相對路徑
//讀取內容寫入臨時文件,以便插件在線編輯
byte fileBody[] = new byte[10240];
Words word = wordsBiz.getWordByWid(wid);
fileName = word.getName()+".docx";
fileBody = word.getDesc().getBytes();
fileUrl = relativeOfficeFileUrl+"/"+uid+fileName;//相對路徑,訪問用
String inFileUrl= absoluteOfficeFileDir+ "/" +uid+fileName;//絕對路徑,io操作所用
FileOutputStream fs = new FileOutputStream(inFileUrl);
fs.write(fileBody);
fs.flush();
fs.close();
model.addAttribute("fileUrl", fileUrl);
model.addAttribute("word", word);
return "wordscheck";
}
前台頁面部分:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>office文檔編輯</title>
<meta content="IE=7" http-equiv="X-UA-Compatible" />
<!--設置緩存-->
<!-- <meta http-equiv="cache-control" content="no-cache,must-revalidate">
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="expires" content="0"> -->
<link href="/resources/css/StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> src="${pageContext.request.contextPath}/resources/js/jquery-1.11.3.js"></script>
</head>
<body onload='load("${fileUrl}");'>
<form id="form1" action="upLoadOfficeFile.jsp" enctype="multipart/form-data" style="padding:0px;margin:0px;">
<input size="100" type="text" name="url" id="url" value="${fileUrl}"/>
<div id="editmain" class="editmain">
<div id="editmain_middle" class="editmain_middle">
<div id="editmain_right" class="editmain_right">
<div id="formtop">
<table>
<tr>
<td width="8%"> 文 件 ID:</td>
<td width="20%"><input name="flowInid" id="flowInid" readonly="readonly" type="text" value="${word.wid }" /></td>
<td width="8%">文件名稱:</td>
<td width="20%"><input name="filename" id="filename" type="text" value="${word.name }" /></td>
<td> </td>
</tr>
</table>
<div id=statusBar style="height:20px;width:100%;background-color:#c0c0c0;font-size:12px;"></div>
//重點的JS 必須要加載的
<script language="javascript" type="text/javascript" src="${pageContext.request.contextPath}/resources/js/ntkoofficecontrol.js"></script>
<script type="text/javascript">
var OFFICE_CONTROL_OBJ;//控件對象
var IsFileOpened; //控件是否打開文檔
var fileType;
var fileTypeSimple;
function load(fileUrl){
alert(fileUrl);
OFFICE_CONTROL_OBJ = document.all("TANGER_OCX");//瀏覽文檔控件的加載必須要有的
NTKO_OCX_OpenDoc(fileUrl);//需要的內容加載進文檔控件
}
function NTKO_OCX_OpenDoc(fileUrl) {
OFFICE_CONTROL_OBJ.BeginOpenFromURL(fileUrl);
}
</script>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
《ntkoofficecontrol.js》重點代碼
document.write('<!-- 用來產生編輯狀態的ActiveX控件的JS腳本--> ');
document.write('<!-- 因為微軟的ActiveX新機制,需要一個外部引入的js--> ');
document.write('<object id="TANGER_OCX" classid="clsid:A39F1330-3322-4a1d-9BF0-0BA2BB90E970" ');
document.write('codebase="http://www.ntko.com/control/officecontrol/OfficeControl.cab#version=5,0,2,7" width="100%" height="100%"> ');
document.write('<param name="IsUseUTF8URL" value="-1"> ');
document.write('<param name="IsUseUTF8Data" value="-1"> ');
document.write('<param name="BorderStyle" value="1"> ');
document.write('<param name="BorderColor" value="14402205"> ');
document.write('<param name="TitlebarColor" value="15658734"> ');
document.write('<param name="TitlebarTextColor" value="0"> ');
document.write('<param name="MenubarColor" value="14402205"> ');
document.write('<param name="MenuButtonColor" VALUE="16180947"> ');
document.write('<param name="MenuBarStyle" value="3"> ');
document.write('<param name="MenuButtonStyle" value="7"> ');
document.write('<param name="WebUserName" value="NTKO"> ');
document.write('<param name="Caption" value="NTKO OFFICE文檔控件示例演示 http://www.ntko.com"> ');
document.write('<SPAN STYLE="color:red">不能裝載文檔控件。請確認你可以連接網絡或者檢查瀏覽器的選項中安全設置。<a href="http://www.ntko.com/control/officecontrol/officecontrol.zip">安裝演示產品</a></SPAN> ');
document.write('</object>');
