office在线预览以及在线编辑1
做OA或者工作流程的网站中，常常能够看到一些在线Word编辑进行文档处理的功能，这里我开发了一个在线Word编辑插件并且以此为例。
1．NTKO Word在线编辑器介绍：
NTKO的官方网站：http://www.ntko.com/ NTKO OFFICE文档控件是拥有完全自主知识产权的ActiveX控件。使用NTKO Office文档控件，能够在浏览器中直接编辑Word,Excel等Office文档，或者WPS，金山电子表等文档并保存到web服务器。实现文档和电子表格的统一管理。NTKO OFFICE文档控件具有在线编辑，痕迹保留，手写签名，模板套红，安全电子印章[企业版提供]，全屏批注，保存为HTML,MHT,PDF文件等办公自动化系统必备的功能。可以运行在PHP，ASP，JSP，C#，VB.NET，DOMINO等各种web编程语言和服务器。
2．列出完整的jQuery插件的代码清单：
jquery.ntko.js
/* @author: Leepy
* @date: 2010-12
* @descript: ntko word编辑器JQ插件
*/
(
function($) {
$.ntko = $.ntko || {};
$.fn.extend(
{
//文件类型
fileType: {
Word: "Word.Document",
Excel: "Excel.Sheet",
PowerPoint: "PowerPoint.Show"
},
//弹出窗类型
showDialogType: {
New: 0,
Open: 1,
Save: 2,
SaveCopy: 3,
Print: 4,
PageSetup: 5,
Properties: 6
},
//Word信息内容
wordInfo: {
Start: 0,
End: 0,
Text: "NDOFramer"
},
//表单设置
formSettings: {
UploadFileId: "EDITFILE",
Data: "savetype=1&fileType=",
FileName: "demo.doc",
FormId: 0
},
_doc: null,
_selection: null,
_range: null,
//初始化插件
ntko: function(parameters) {
parameters = parameters || {};
var ndObj = null;
this.each(function(i) {
ndObj = $.ntko.init(this, parameters);
});
return ndObj;
},
//关闭插件
close: function() {
this[0].close();
},
//打开文档
open: function(url) {
this[0].BeginOpenFromURL(url); //第二个参数为只读设置
},
//新建Word文档
newWord: function() {
this[0].CreateNew(this.fileType.Word);
},
//新建Excel文档
newExcel: function() {
this[0].CreateNew(this.fileType.Excel);
},
//新建PowerPoint文档
newPowerPoint: function() {
this[0].CreateNew(this.fileType.PowerPoint);
},
//打开本地文档
openLocalFile: function() {
this[0].showdialog(this.showDialogType.Open);
},
//保存到本地
saveLocalFile: function() {
this[0].ActiveDocument.Application.Dialogs(83).Show()
},
//保存文档，返回是否保存成功
save: function(url, parameters) {
if (typeof (parameters.formId) !== "undefined")
this.formSettings.FormId = parameters.formId;
if (typeof (parameters.data) !== "undefined")
this.formSettings.Data = parameters.data;
var retHTML = this[0].saveToURL(url, //提交到的url地址
this.formSettings.UploadFileId, //文件域的id，类似<input type=file id=upLoadFile 中的id
this.formSettings.Data, //与控件一起提交的参数,savetype参数为要保存的文件格式office,html,pdf。filetype参数保存文件类型
this.formSettings.FileName, //上传文件的名称，类似<input type=file 的value
this.formSettings.FormId //与控件一起提交的表单id，也可以是form的序列号，这里应该是0.
);
return retHTML;
},
//下载远程文件
downloadFile: function(url, localPath) {
this[0].DownloadFile(url, localPath);
},
//插入本地文档
insertLocalFile: function() {
this[0].ActiveDocument.Application.Dialogs(164).Show();
},
//插入文档
insertFile: function(url) {
this._doc = this[0].ActiveDocument;
this._doc.Activate();
// this._doc.Select();
// this._doc.Application.Selection.Select();
this[0].AddTemplateFromURL(url);
},
//插入本地图片
insertLocalImage: function() {
this[0].ActiveDocument.Application.Dialogs(163).Show();
},
//插入图片
insertImage: function(url, type) {
this[0].InsertFile(url, type + 8);
},
//插入文本
insertText: function(text) {
this._doc = this[0].ActiveDocument;
this._doc.Activate();
this._doc.Application.Selection.InsertAfter(text);
},
//页面设置
setPageSetup: function() {
this[0].showdialog(this.showDialogType.PageSetup);
},
//文档属性设置
setProperty: function() {
this[0].showdialog(this.showDialogType.Properties);
},
//打印
print: function() {
// this[0].PrintOut();
this[0].showdialog(this.showDialogType.Print);
},
//打印预览
printPreview: function() {
this[0].PrintPreview();
},
//关闭打印预览
printExit: function() {
this[0].PrintPreviewExit();
},
//隐藏工具栏
hideToolbar: function() {
this[0].Activate(false);
this[0].Toolbars = false;
},
//显示工具栏
showToolbar: function() {
this[0].Activate(false);
this[0].Toolbars = true;
},
//隐藏菜单栏
hideMenubar: function() {
this[0].Activate(false);
this[0].Menubar = false;
},
//显示菜单栏
showMenubar: function() {
this[0].Activate(false);
this[0].Menubar = true;
},
//获取或设置窗口高度
height: function(arg) {
if (typeof (arg) !== "undefined") {
this.css("height",arg);
}
else {
return this.css("height"); ;
}
},
//获取或设置窗口宽度
width: function(arg) {
if (typeof (arg) !== "undefined") {
this.css("width", arg);
}
else {
return this.css("width"); ;
}
},
//删除本地路径，如c:\\1.doc
deleteLocalFile: function(localPath) {
this[0].DeleteLocalFile(localPath);
},
showView: function(showViewType) {
this[0].Activate(false);
this[0].ActiveDocument.ActiveWindow.View = showViewType;
},
//添加本地附加文件
// addLocalFile: function(fileID,locaPath) {
// this[0].HttpAddPostFile(fileID, locaPath);
// },
// hostName: function() {
// return this[0].HostName;
// },
// documentFullName: function() {
// return this[0].DocumentFullName;
// },
// caption: function() {
// return this[0].Caption;
// },
// track: function() {
// this[0].SetCurrUserName("liping");
// this[0].SetTrackRevisions(1);
// },
// showTrack: function() {
// this[0].ShowRevisions(1);
// this[0].ShowView(0);
// },
//是否只读
isReadOnly: function() {
return this[0].IsReadOnly;
},
//文档是否已做修改
isDirty: function() {
return !this[0].ActiveDocument.Saved;
},
//获取文档所有内容，返回该Word文档内容Json
range: function() {
this._doc = this[0].ActiveDocument;
this._doc.Activate();
this._range = this._doc.Range();
this.wordInfo.Start = this._range.Start;
this.wordInfo.End = this._range.End;
this.wordInfo.Text = this._doc.Range(this._range.Start, this._range.End).Text;
return this.wordInfo;
},
//选中文档所有内容，返回该Word文档内容Json
select: function() {
this._doc = this[0].ActiveDocument;
this._doc.Activate();
this._doc.Select();
this._selection = this._doc.Application.Selection;
this.wordInfo.Start = this._selection.Start;
this.wordInfo.End = this._selection.End;
this.wordInfo.Text = this._doc.Range(this._selection.Start, this._selection.End).Text;
return this.wordInfo;
},
//取消选中内容
unselect: function() {
if (this._selection != null) {
this._selection.Start = 0;
this._selection.End = 0;
this._selection = null;
}
},
replace: function(text, start, end) {
// alert(this._doc.Range(start,end).Text);
this._doc.Range(start, end).Text = text;
// alert(this._doc.range(this.wordInfo.Starti,this.wordInfo.End).Text);
},
//清除文本
clear: function() {
var wordDoc = this[0].ActiveDocument;
wordDoc.Activate();
wordDoc.Select();
var wordSelection = wordDoc.Application.Selection;
wordDoc.Range(wordSelection.Start, wordSelection.End).Text = "";
}
});
$.extend($.ntko,
{
settings:
{
folder: "",
width: "700px",
height: "500px",
id: "OFRAMER_" + new Date().getTime(),
isToolbar: true,
isMenubar: true,
failed: function() { }
},
init: function(obj, parameters) {
//赋值参数
if (typeof (parameters.folder) !== "undefined")
this.settings.folder = parameters.folder;
if (typeof (parameters.width) !== "undefined")
this.settings.width = parameters.width;
if (typeof (parameters.height) !== "undefined")
this.settings.height = parameters.height;
if (typeof (parameters.id) !== "undefined")
this.settings.id = parameters.id;
if (typeof (parameters.isToolbar) !== "undefined")
this.settings.isToolbar = parameters.isToolbar;
if (typeof (parameters.isMenubar) !== "undefined")
this.settings.isMenubar = parameters.isMenubar;
if (typeof (parameters.failed) !== "undefined")
this.settings.failed = parameters.failed || {};
//构造插件Html
this._createHTML(obj);
var acxId = this.settings.id;
var acxJQjery = null;
var failed = this.settings.failed;
//判断是否安装了word编辑器插件
try {
document.getElementById(acxId).Close();
acxJQjery = $("#" + acxId);
}
catch (e) {
failed(e);
}
return acxJQjery;
},
//构造插件Html
_createHTML: function(obj) {
$(obj).html(
this._stringFormat("<object classid=\"clsid:A39F1330-3322-4a1d-9BF0-0BA2BB90E970\" codebase=\"{0}/officecontrol.cab#version=5,0,0,6\"" +
"id=\"{1}\" width=\"{2}\" height=\"{3}\">" +
"<param name=\"wmode\" value=\"transparent\">" +
"<param name=\"_ExtentX\" value=\"16960\">" +
"<param name=\"_ExtentY\" value=\"13600\">" +
"<param name=\"BorderColor\" value=\"-2147483632\">" +
"<param name=\"BackColor\" value=\"-2147483643\">" +
"<param name=\"ForeColor\" value=\"-2147483640\">" +
"<param name=\"TitlebarColor\" value=\"-2147483635\">" +
"<param name=\"TitlebarTextColor\" value=\"-2147483634\">" +
"<param name=\"BorderStyle\" value=\"0\">" +
"<param name=\"Titlebar\" value=\"0\">" +
"<param name=\"Statusbar\" value=\"0\">" +
"<param name=\"Toolbars\" value=\"{4}\">" +
"<param name=\"Menubar\" value=\"{5}\">" +
"<param name=\"_ExtentX\" VALUE=\"18071\">" +
"<param name=\"_ExtentY\" VALUE=\"20981\">" +
"<param name=\"IsShowToolMenu\" VALUE=\"1\">" +
"<param name=\"IsNoCopy\" VALUE=\"0\">" +
"<param name=\"IsHiddenOpenURL\" VALUE=\"0\">" +
"<param name=\"MaxUploadSize\" VALUE=\"0\">" +
"<param name=\"FileNew\" VALUE=\"-1\">" +
"<param name=\"FileOpen\" VALUE=\"-1\">" +
"<param name=\"FileClose\" VALUE=\"-1\">" +
"<param name=\"FileSave\" VALUE=\"-1\">" +
"<param name=\"FileSaveAs\" VALUE=\"-1\">" +
"<param name=\"FilePrint\" VALUE=\"-1\">" +
"<param name=\"FilePrintPreview\" VALUE=\"-1\">" +
"<param name=\"FilePageSetup\" VALUE=\"-1\">" +
"<param name=\"FileProperties\" VALUE=\"-1\">" +
"<param name=\"IsStrictNoCopy\" VALUE=\"0\">" +
"<param name=\"IsUseUTF8URL\" VALUE=\"0\">" +
"<param name=\"MenubarColor\" VALUE=\"-2147483643\">" +
"<param name=\"IsUseControlAgent\" VALUE=\"0\">" +
"<param name=\"IsUseUTF8Data\" VALUE=\"0\">" +
"<param name=\"IsSaveDocExtention\" VALUE=\"0\">" +
"<param name=\"IsDirectConnect\" VALUE=\"0\">" +
"<param name=\"SignCursorType\" VALUE=\"0\">" +
"<param name=\"IsResetToolbarsOnOpen\" VALUE=\"0\">" +
"<param name=\"IsSaveDataIfHasVDS\" VALUE=\"0\">" +
"</object>",
this.settings.folder,
this.settings.id,
this.settings.width,
this.settings.height,
this.settings.isToolbar + "" == "true" ? "1" : "0",
this.settings.isMenubar + "" == "true" ? "1" : "0"
));
},
//string格式化构造器
_stringFormat: function(str) {
var args = arguments;
return str.replace(/\{(\d+)\}/g,
function(m, i) {
return args[parseInt(i) + 1];
});
}
}
);
}
)(jQuery);
3**．这里要注意几个问题，**首先在保存文档到远程服务器的时候，可以使用aspx页面或者ashx页面去处理。
具体调用的代码：jqObj.save(“process.aspx?action=test&data=demo”, { formId: “formeditor” }); 可以发现我这里有个formId的参数，这个是因为我必须把Word插件必须放在Form标签中，这样在POST数据，也就是文件流的时候有用。 而在process.aspx页面中，的具体代码实现为：
protected void Page_Load(object sender, EventArgs e)
{
Response.ContentEncoding = Encoding.GetEncoding("GB2312");
string action = Request.QueryString["action"] ?? "";
switch (action)
{
case "test":
Test(); //测试保存数据
break;
}
}
private void Test()
{
string data = Request.QueryString["data"] ?? "";
HttpFileCollection files = Request.Files;
try
{
if (files.Count > 0)
{
HttpPostedFile file = files[0];
string fileName = Server.MapPath(String.Format("~/output/{0}_{1}.doc", data, Guid.NewGuid()));
file.SaveAs(fileName);
Response.Write(String.Format("保存附件“{0}”成功！\r\n返回测试数据：{1}", fileName, data));
}
}
catch
{
Response.Write("有异常");
}
}
其中，一定要记得写Response.ContentEncoding = Encoding.GetEncoding(“GB2312”);这段代码，如果没有写，返回的中文会出现乱码的情况。我们通过HttpFileCollection files = Request.Files;方式可以取得一个POST文件流。
在第一次使用该插件的时候，首先必须进行安装，您可以通过下载一个Word编辑器插件安装包.rar包，来安装插件，包里面包含相关的批处理操作，大家自己可以试试。
[下载地址]: