在做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插件的代码清单:
* @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页面中,的具体代码实现为:
{
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包,来安装插件,包里面包含相关的批处理操作,大家自己可以试试。
下面演示下DEMO(保存操作大家可以下代码下来看看吧)
jqObj = $("#WordEditor").ntko(
{
folder: "Scripts/",
id: "WordEditorControl",//命名ActiveX对象ID
isToolbar: false,//是否显示工具栏
isMenubar: false,//是否显示菜单栏
width: "710px",
height: "600px"
});
(注:这里 WordEditor 为插件容器的ID)
jqObj.newWord();
jqObj.openLocalFile();
jqObj.open("template/demo.doc");
(注:url可以用 .aspx, .ashx 来替代,采用文件流读取的方式)
jqObj.saveLocalFile();
var result = jqObj.save("process.aspx?action=test&data=demo", { formId: "formeditor" });
(注:其中formId为form的ID)
jqObj.showToolbar();
jqObj.hideToolbar();
jqObj.showView(1);
jqObj.showView(3);
jqObj.height("800");
jqObj.height();
jqObj.width("1000");
jqObj.width();
jqObj.insertText("O(∩_∩)O哈哈哈~");
jqObj.insertLocalImage();
jqObj.insertLocalFile();
jqObj.clear();