近来的项目时在公司做内容管理系统,涉及到很多浏览器端的展示,公司统一用的是点聚的weboffice控件,以前没用过,摸索了一段时间,总结和记录一下在使用的过程中遇到的问题。
1. 安装
安装的过程还是很简答的,个人觉得最简答的做法是直接到点聚官网的在线使用,
http://www.dianju.cn:9236/gongwen/,下载控件,直接安装,就可以用了。不过在开始安装的时候也还是遇到一点问题,我是直接从同事那里拷贝过来的,然后把dll文件放到system32下面,用regsvr32命令注册,结果不行。后来安装的时候发现64位的系统syswow64文件夹下面,卸载的时候也要把该文件夹下的dll文件删除。
2.使用
关于weboffice的使用官方提供了一整套的开发文档,应该说基本要用的功能都有了,不过对于新手还是得摸索一下才能熟悉,我当时有同事的例子一边看一边写花了一两天的时间才真正做点东西出来。
初始化:
其实就是把<object>对象放到页面中,能找到的例子代码都是这样子:var s = ""
s += "<object id=WebOffice1 height=768 width='100%' style='LEFT: 0px; TOP: 0px' classid='clsid:E77E049B-23FC-4DB8-B756-60529A35FAD5' codebase='WebOffice.ocx#version=7,0,0,0'>"
s +="<param name='_ExtentX' value='6350'><param name='_ExtentY' value='6350'>"
s +="</OBJECT>"
document.write(s)
反正我觉得很奇怪,因为这样太不灵活了。
我修改的初始化方法:
var webObj = null;
/****************************************************
* 构造weboffice对象
* @containerID:置放weboffice对象的容器ID
* @webofficeID:webofficeID
/****************************************************/
function constructWebOffice(containerID,webofficeID){
var s = "";
s += "<object id="+webofficeID+" height=768 width='100%' style='LEFT: 0px; TOP: 0px' " +
"classid='clsid:E77E049B-23FC-4DB8-B756-60529A35FAD5' codebase='WebOffice.ocx#version=7,0,0,0'>";
s +="<param name='_ExtentX' value='6350'><param name='_ExtentY' value='6350'>";
s +="</object>";
$("#"+containerID).html(s);
webObj = document.getElementById(webofficeID);
webObj.ShowToolBar = false; //隐藏weboffice自带工具栏
}
3.关于上传到远程服务器
Weboffice的上传原理是先保存到本地临时文件,然后模拟表单上传文件,所以在服务器端接收上传文件的程序也很简单,和普通上传文件一样。
上传的js方法:
/****************************************************
*
*保存weboffice的文档到服务器
*@url : 保存文件的远程地址
*
/****************************************************/
function saveToServer(postUrl){
webObj.HttpInit(); // 初始化Http 引擎
webObj.HttpAddPostCurrFile("file","");
var returnValue=webObj.HttpPost(postUrl);
return returnValue;
}
我这里url的指向是jsp文件,当然也可以指向action:
var url =
"http://"+window.location.host+"/projectPathupload.jsp";
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,java.io.*" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="org.json.simple.*" %>
<%@ page import="org.apache.commons.fileupload.*"%>
<%
/**
* 保存webOffice文档到服务器,返回相对地址
*
*/
String oapath = System.getProperty("oapath");
String savePath = oapath + "/portalfile/upload/";
String dirName = "attached";
savePath += dirName + "/";
String relativePath = "/upload/"+dirName+"/";
String saveUrl = relativePath;
SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if(isMultipart){
DiskFileItemFactory factory=new DiskFileItemFactory();
// factory.setRepository(new File(savePath+"/temp"));// 设置缓冲区目录
ServletFileUpload fu=new ServletFileUpload(factory);
//设置允许用户上传文件大小,单位:字节
fu.setSizeMax(100000000);
List fileItems = fu.parseRequest(request);
Iterator<FileItem> itr = fileItems.iterator();//所有的表单项
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();//循环获得每个表单项
if(!item.isFormField()){
String fileName = item.getName();//获得文件名 包括路径
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();//后缀名
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try{
File savedFile=new File(savePath+newFileName);
item.write(savedFile);
out.print(saveUrl+newFileName);
}catch(Exception e){
out.print("failed");
}
}
}
}
%>
4.上传生成的pdf问题
查了一下开发文档,没有找到保存当前文档pdf到远程服务器的接口,我用的折中方法是先保存pdf文件到本地,然后调用HttpAddPostFile接口添加生成在本地的文件到虚拟form中,再去上传。
Js方法如下:
/****************************************************
*保存为pdf文件到服务器
*@newName : 保存在服务器上的pdf文件名(相对路径)
*@url : 远程保存程序地址
****************************************************/
function saveAsPdf(newName,url){
//获取临时目录
var tempPath = webObj.GetTempFilePath();
//更改文件名为pdf格式
var reg1 = /\\(\w+|\.)+$/;
tempPath = tempPath.replace(reg1,'\webofficeTemp.pdf');
//转义"\"为"\\"
var reg2 = /\\/;
tempPath = tempPath.replace(reg2,'\\');
var success = webObj.SaveAsPDF("", tempPath, 0);
webObj.HttpInit(); // 初始化Http 引擎
webObj.HttpAddPostString("newName", newName);
webObj.HttpAddPostFile("tempFile", tempPath);
var returnValue=webObj.HttpPost(url);
}
服务器端和上传word基本一致.
5.使用过程中遇到的一些问题
a.对wps的兼容性不是特别好,有时候会出问题
b.office基本上处于最高的显示级别,设置index无效,会遮盖掉div,遮罩层要特殊处理一下。