我对这个功能的理解是:拿到你想要显示的信息,写入到一个临时文件当中去以便插件进行编辑。把临时文件的相对路径传到页面去。页面拿到这个要显示的文档的相对路径对文档进行编辑在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>‘);