WPS-windows系统(A6【公司自研框架与vue用法差不多】项目建议ActiveX,IE+360兼容模式)
1.加载wps控件
html(word)
<div id="app" style="height:100%;width:100%" v-cloak>
<div id="wps" style="height:100%;width:100%" ></div>
</div>
js
var vm = new Vue({
el: '#app',
data: function () {
return {
//url参数
urlParams: null,
DocFrame: null,
MenuItems: {
FILE: 1 << 0,
EDIT: 1 << 1,
VIEW: 1 << 2,
INSERT: 1 << 3,
FORMAT: 1 << 4,
TOOL: 1 << 5,
CHART: 1 << 6,
HELP: 1 << 7
},
FileSubmenuItems: {
NEW: 1 << 0,
OPEN: 1 << 1,
CLOSE: 1 << 2,
SAVE: 1 << 3,
SAVEAS: 1 << 4,
PAGESETUP: 1 << 5,
PRINTPY: 1 << 6,
PRINT: 1 << 7,
PROPERTY: 1 << 8
}
}
},
methods: {
//初始化obj
init: function (tagID, width, height) {
var iframe;
var obj;
var _this = this;
iframe = document.getElementById(tagID);
var codes = [];
codes.push('<object id=DocFrame1 height=' + height + ' width=' + width + ' ');
codes.push('data=data:application/x-oleobject;base64,7Kd9juwHQ0OBQYiirbY6XwEABAA7DwMAAgAEAB0AAAADAAQAgICAAAQABAD///8ABQBcAFgAAABLAGkAbgBnAHMAbwBmAHQAIABBAGMAdABpAHYAZQBYACAARABvAGMAdQBtAGUAbgB0ACAARgByAGEAbQBlACAAQwBvAG4AdAByAG8AbAAgADEALgAwAAAA ');
codes.push('classid=clsid:8E7DA7EC-07EC-4343-8141-88A2ADB63A5F viewastext=VIEWASTEXT></object> ');
iframe.innerHTML = codes.join("");
obj = document.getElementById("DocFrame1");
var fn = function () {
//用户请求保存文档(ctrl+s)
function obj
::OnRequireSave()
{
_this.onRequireSave()
}
//用户保存(工具栏保存)
function obj
::OnDocumentBeforeSave()
{
_this.onDocumentBeforeSave()
}
};
fn();
return obj;
},
//初始化插件
initFrame: function () {
this.DocFrame = this.init("wps", "100%", "100%");
//隐藏关闭按钮,只许浏览器标签页关闭
this.DocFrame.FileSubmenuItems &= ~[this.FileSubmenuItems.CLOSE];
},
// 新建文档
createDocument: function () {
this.DocFrame.createDocument("uot");
},
// 打开远程文档
// pathUrl 必填
// readOnly 非必填 为true时表示按只读打开,否则按可编辑打开 不填为只读打开。
openDocumentRemote: function (pathUrl, readOnly) {
this.DocFrame.openDocumentRemote(pathUrl, readOnly == undefined ? true : readOnly);
},
//用户请求保存文档事件
onRequireSave: function () {
console.log("用户请求保存文档");
},
//用户保存事件
onDocumentBeforeSave: function () {
console.log("用户保存");
},
// 保存到远端
saveURL: function (url, fileName) {
this.DocFrame.saveURL(url, fileName);
},
// 保护文档 true 保护文档(只读) false 停止保护(可编辑)
enableProtect: function (flag) {
this.DocFrame.enableProtect(flag);
},
},
created: function () {
//获取url参数
this.urlParams = getUrlParams()
},
mounted: function () {
var _this = this;
//初始化插件
this.initFrame();
//存在即为打开远端url
if (this.urlParams.type) {
this.openDocumentRemote('http://172.26.18.58:8088/滴滴填写说明.docx')
} else {
this.createDocument()
}
}
});
html(Excel)
<div id="app" style="height:100%;width:100%" v-cloak>
<div id="et" style="height:100%;width:100%"></div>
</div>
js
var vm = new Vue({
el: '#app',
data: function () {
return {
//url参数
urlParams: null,
DocFrame: null,
MenuItems: {
FILE: 1 << 0,
EDIT: 1 << 1,
VIEW: 1 << 2,
INSERT: 1 << 3,
FORMAT: 1 << 4,
TOOL: 1 << 5,
CHART: 1 << 6,
HELP: 1 << 7
},
FileSubmenuItems: {
NEW: 1 << 0,
OPEN: 1 << 1,
CLOSE: 1 << 2,
SAVE: 1 << 3,
SAVEAS: 1 << 4,
PAGESETUP: 1 << 5,
PRINT: 1 << 6,
PROPERTY: 1 << 7
}
}
},
methods: {
//初始化obj
init: function (tagID, width, height) {
var iframe;
var obj;
var _this = this;
iframe = document.getElementById(tagID);
var codes = [];
codes.push('<object id=DocFrame1 height=' + height + ' width=' + width + ' ');
codes.push('data=data:application/x-oleobject;base64,7Kd9juwHQ0OBQYiirbY6XwEABAA7DwMAAgAEAB0AAAADAAQAgICAAAQABAD///8ABQBcAFgAAABLAGkAbgBnAHMAbwBmAHQAIABBAGMAdABpAHYAZQBYACAARABvAGMAdQBtAGUAbgB0ACAARgByAGEAbQBlACAAQwBvAG4AdAByAG8AbAAgADEALgAwAAAA ');
codes.push('classid=clsid:8E7DA7EC-07EC-4343-8141-88A2ADB63A5F viewastext=VIEWASTEXT></object> ');
iframe.innerHTML = codes.join("");
obj = document.getElementById("DocFrame1");
var fn = function () {
//用户请求保存文档(ctrl+s)
function obj
::OnRequireSave()
{
_this.onRequireSave()
}
//用户保存(工具栏保存)
function obj
::OnDocumentBeforeSave()
{
_this.onDocumentBeforeSave()
}
};
fn();
return obj;
},
//初始化插件
initFrame: function () {
this.DocFrame = this.init("et", "100%", "100%");
this.DocFrame.AppModeType = "et";
//隐藏关闭按钮,只许浏览器标签页关闭
this.DocFrame.FileSubmenuItems &= ~[this.FileSubmenuItems.CLOSE];
},
// 新建文档
createDocument: function () {
this.DocFrame.createDocument("uos");
},
// 打开远程文档
// pathUrl 必填
// readOnly 非必填 为true时表示按只读打开,否则按可编辑打开 不填为只读打开。
openDocumentRemote: function (pathUrl, readOnly) {
this.DocFrame.openDocumentRemote(pathUrl, readOnly == undefined ? true : readOnly);
},
//用户请求保存文档
onRequireSave: function () {
console.log("用户请求保存文档");
},
//用户保存
onDocumentBeforeSave: function () {
console.log("用户保存");
},
// 保存到远端
saveURL: function (url, fileName) {
this.DocFrame.saveURL(url, fileName);
},
// 保护文档 true 保护文档(只读) false 停止保护(可编辑)
enableProtect: function (flag) {
this.DocFrame.enableProtect(flag);
},
},
created: function () {
this.urlParams = getUrlParams()
},
mounted: function () {
var _this = this;
//初始化插件
this.initFrame();
//存在即为打开远端url
if (this.urlParams.type) {
this.openDocumentRemote('http://172.26.18.58:8088/年会节目&主持人报名信息表.xlsx')
} else {
this.createDocument()
}
}
});
html
<div id="app" style="height:100%;width:100%" v-cloak>
<div id="wpp" style="height:100%;width:100%"></div>
</div>
js
var vm = new Vue({
el: '#app',
data: function () {
return {
//url参数
urlParams: null,
DocFrame: null,
MenuItems: {
FILE: 1 << 0,
EDIT: 1 << 1,
VIEW: 1 << 2,
INSERT: 1 << 3,
FORMAT: 1 << 4,
TOOL: 1 << 5,
CHART: 1 << 6,
HELP: 1 << 7
},
FileSubmenuItems: {
NEW: 1 << 0,
OPEN: 1 << 1,
CLOSE: 1 << 2,
SAVE: 1 << 3,
SAVEAS: 1 << 4,
PAGESETUP: 1 << 5,
PRINTPY: 1 << 6,
PRINT: 1 << 7,
PROPERTY: 1 << 8
}
}
},
methods: {
//初始化obj
init: function (tagID, width, height) {
var iframe;
var obj;
var _this = this;
iframe = document.getElementById(tagID);
var codes = [];
codes.push('<object id=DocFrame1 height=' + height + ' width=' + width + ' ');
codes.push('data=data:application/x-oleobject;base64,7Kd9juwHQ0OBQYiirbY6XwEABAA7DwMAAgAEAB0AAAADAAQAgICAAAQABAD///8ABQBcAFgAAABLAGkAbgBnAHMAbwBmAHQAIABBAGMAdABpAHYAZQBYACAARABvAGMAdQBtAGUAbgB0ACAARgByAGEAbQBlACAAQwBvAG4AdAByAG8AbAAgADEALgAwAAAA ');
codes.push('classid=clsid:8E7DA7EC-07EC-4343-8141-88A2ADB63A5F viewastext=VIEWASTEXT></object> ');
iframe.innerHTML = codes.join("");
obj = document.getElementById("DocFrame1");
var fn = function () {
//用户请求保存文档(ctrl+s)
function obj
::OnRequireSave()
{
_this.onRequireSave()
}
//用户保存(工具栏保存)
function obj
::OnDocumentBeforeSave()
{
_this.onDocumentBeforeSave()
}
};
fn();
return obj;
},
//初始化插件
initFrame: function () {
this.DocFrame = this.init("wpp", "100%", "100%");
this.DocFrame.AppModeType = "wpp";
//隐藏关闭按钮,只许浏览器标签页关闭
this.DocFrame.FileSubmenuItems &= ~[this.FileSubmenuItems.CLOSE];
},
// 新建文档
createDocument: function () {
this.DocFrame.createDocument("uop");
},
// 打开远程文档
// pathUrl 必填
// readOnly 非必填 为true时表示按只读打开,否则按可编辑打开 不填为只读打开。
openDocumentRemote: function (pathUrl, readOnly) {
this.DocFrame.openDocumentRemote(pathUrl, readOnly == undefined ? true : readOnly);
},
//用户请求保存文档事件
onRequireSave: function () {
console.log("用户请求保存文档");
},
//用户保存事件
onDocumentBeforeSave: function () {
console.log("用户保存");
},
// 保存到远端
saveURL: function (url, fileName) {
this.DocFrame.saveURL(url, fileName);
},
},
created: function () {
this.urlParams = getUrlParams()
},
mounted: function () {
var _this = this;
//初始化插件
this.initFrame();
//存在即为打开远端url
if (this.urlParams.type) {
this.openDocumentRemote('http://172.26.18.58:8088/架构设计v2.ppt')
} else {
this.createDocument()
}
}
});
WPS-linux系统
html(word)
<div id="app" style="height:100%;width:100%" v-cloak>
<div id="wps" style="height:100%;width:100%" ></div>
</div>
js
var vm = new Vue({
el: '#app',
data: function () {
return {
//url参数
urlParams: null,
DocFrame: null,
}
},
methods: {
//初始化obj
init: function (tagID) {
var iframe;
var obj;
iframe = document.getElementById(tagID);
iframe.innerHTML = '';
var codes = [];
codes.push(
"<object name='webwps' id='id-wps' type='application/x-wps' width='100%' height='100%'> <param name='Enabled' value='1' /> </object>"
);
iframe.innerHTML = codes.join("");
obj = document.getElementById("id-wps");
window.onbeforeunload = function () {
obj.Application.Quit();
};
window.onresize = function () {
console.log("ondrag");
obj.sltReleaseKeyboard();
};
return obj.Application;
},
//初始化插件
initFrame: function () {
this.DocFrame = this.init("wps");
},
// 新建文档
createDocument: function () {
//obj.EnterEditMode();//解决新建之后立马能输入 QuitEditMode sltReleaseKeyboard
this.DocFrame.createDocument("wps");
},
// 打开远程文档
// pathUrl 必填
// readOnly 非必填 为true时表示按只读打开,否则按可编辑打开 不填为只读打开。
openDocumentRemote: function (pathUrl, readOnly) {
this.DocFrame.openDocumentRemote(pathUrl, readOnly == undefined ? true : readOnly);
},
// 保存到远端
saveURL: function (url, fileName) {
this.DocFrame.saveURL(url, fileName);
},
// 保护文档 true 保护文档(只读) false 停止保护(可编辑)
enableProtect: function (flag) {
this.DocFrame.enableProtect(flag);
},
},
created: function () {
this.urlParams = getUrlParams()
},
mounted: function () {
var _this = this;
//初始化插件
this.initFrame();
//存在即为打开远端url
if (this.urlParams.type) {
this.openDocumentRemote('http://172.26.18.58:8088/滴滴填写说明.docx')
} else {
this.createDocument()
}
//注册保存事件
this.DocFrame.registerEvent("DIID_ApplicationEvents4", "DocumentBeforeSave", "documentBeforeSaveCallBack");
}
});
//保存事件
function documentBeforeSaveCallBack() {
console.log('保存')
}
html(Excel)
<div id="app" style="height:100%;width:100%" v-cloak>
<div id="et" style="height:100%;width:100%"></div>
</div>
js
var vm = new Vue({
el: '#app',
data: function () {
return {
//url参数
urlParams: null,
DocFrame: null,
office:null
}
},
methods: {
//初始化obj
init: function (tagID) {
if (this.DocFrame != undefined)
this.DocFrame.Application.Quit();
var iframe;
var obj;
iframe = document.getElementById(tagID);
var codes = [];
codes.push('<object name="rpcet" id="id-et" type="application/x-et" wpsshieldbutton="false" width="100%" height="100%">');
codes.push('<param name="quality" value="high" />');
codes.push('<param name="bgcolor" value="#ffffff" />');
codes.push('<param name="Enabled" value="1" />');
codes.push('<param name="allowFullScreen" value="true" />');
codes.push('</object>');
iframe.innerHTML = codes.join("");
obj = document.getElementById("id-et");
window.onbeforeunload = function () {
obj.Application.Quit();
};
return obj.Application
},
//初始化插件
initFrame: function () {
this.DocFrame = this.init("et");
},
// 新建文档
createDocument: function () {
this.DocFrame.Workbooks.Add();
},
// 打开远程文档
// pathUrl 必填
// readOnly 非必填 为true时表示按只读打开,否则按可编辑打开 不填为只读打开。
openDocumentRemote: function (pathUrl, readOnly) {
this.DocFrame.openDocumentRemote_s(pathUrl, readOnly == undefined ? true : readOnly);
},
cs:function () {
console.log(666)
}
},
created: function () {
this.urlParams = getUrlParams()
},
mounted: function () {
var _this = this;
//初始化插件
this.initFrame();
//存在即为打开远端url
if (this.urlParams.type) {
this.openDocumentRemote('http://172.26.18.58:8088/年会节目&主持人报名信息表.xlsx')
} else {
this.createDocument()
}
//注册保存事件
this.DocFrame.registerEvent("DIID_AppEvents", "WorkbookBeforeSave", 'workbookBeforeSaveCallBack');
}
});
//保存事件
function workbookBeforeSaveCallBack(){
console.log('保存')
}
html
<div id="app" style="height:100%;width:100%" v-cloak>
<div id="wpp" style="height:100%;width:100%"></div>
</div>
js
var vm = new Vue({
el: '#app',
data: function () {
return {
//url参数
urlParams: null,
DocFrame: null,
office: null
}
},
methods: {
//初始化obj
init: function (tagID) {
if (this.DocFrame != undefined)
this.DocFrame.Application.Quit();
var iframe;
var obj;
iframe = document.getElementById(tagID);
var codes = [];
codes.push('<object name="rpcwpp" id="id-wpp" type="application/x-wpp" wpsshieldbutton="false" wpspath="/opt/kingsoft/wps-office/office6/wpp" data="/opt/kingsoft/wps-office/office6/mui/default/templates/newfile.dps" width="100%" height="100%">');
codes.push('<param name="quality" value="high" />');
codes.push('<param name="bgcolor" value="#ffffff" />');
codes.push('<param name="Enabled" value="1" />');
codes.push('<param name="allowFullScreen" value="true" />');
codes.push('</object>');
iframe.innerHTML = codes.join("");
obj = document.getElementById("id-wpp");
window.onbeforeunload = function () {
obj.Application.Quit();
};
return obj.Application
},
//初始化插件
initFrame: function () {
this.DocFrame = this.init("wpp");
},
// 新建文档
createDocument: function () {
this.DocFrame.Presentations.Add();
},
// 打开远程文档
// pathUrl 必填
// readOnly 非必填 为true时表示按只读打开,否则按可编辑打开 不填为只读打开。
openDocumentRemote: function (pathUrl, readOnly) {
this.DocFrame.openDocumentRemote(pathUrl, readOnly == undefined ? true : readOnly);
},
},
created: function () {
this.urlParams = getUrlParams()
},
mounted: function () {
var _this = this;
//初始化插件
this.initFrame();
//存在即为打开远端url
if (this.urlParams.type) {
this.openDocumentRemote('http://172.26.18.58:8088/架构设计v2.ppt')
} else {
this.createDocument()
}
}
});
WPS(NPAPI)
1.使用场景
开发者可以编写JavaScript来调用插件功能,该插件可以被支持NPAPI机制的浏览器加载。该插件提供浏览器OA集成的二次开发技术方案,具备快速开发、轻量化的特性。针对企业用户,能快速集成到现有Web 系统,简化企业用户对文档的操作,实现文档自动化; 针对个人用户,可以提供更完·整的个性化能力。
2.插件对浏览器的要求
因为该WPS插件使用NPAPI机制来和浏览器交互,故要求使用插件的浏览器必须支持NPAPI机制且必须开启NPAPI机制。
以下是支持的常见的浏览器及其版本:
- FireFox浏览器52及小于52的版本(高于52的版本不再支持NPAPI)
- Chrome浏览器45及小于45的版本(高于45的版本不再支持NPAPI)
- 360浏览器 (支持NPAPI的版本)
- UOS浏览器 (支持NPAPI的版本)
3.使用范例
<!DOCTYPE html >
<html lang = "en" >
<head>
<meta charset = "UTF-8" >
<title> wps二次开发演示 </title>
</head>
<body>
<object type = "application/x-wps" width = "1024" height = "768" id = "wps" ></object>
<!--通过类型 “application/x-wps” 来加载WPS浏览器NPAPI插件,并传递宽高值-->
<script type = "text/javascript" >
//来获取wps的插件对象
var obj = document.getElementById( "wps" );
//获取WPS对象树的根节点,后续功能调用都是根据 Application 逐步得到的
var Application = obj.Application;
//创建一个新的空白文档
Application.createDocument( "wps" );
//获取文档内容区域
var range = Application.ActiveDocument.Content ;
// 在文档内容区域插入一个3行5列的表格,设置表格显示边框
Application.ActiveDocument.Tables.Add(range, 3, 5).Borders.Enable = 1 ;
< /script>
</body>
</html>
4.效果图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pxqVYfGl-1640662114261)(/images/pasted-62.png)]
5.浏览器集成插件
Demo地址:https://code.aliyun.com/zouyingfeng/wps/tree/master/oaassist/WpsOAAssist
WPS开发文档地址:https://qn.cache.wpscdn.cn/encs/doc/office_v13/index.htm
WPS新增接口说明文档:https://www.kdocs.cn/l/cqVyOOjyWmm8
6.项目中使用到方法整理(app代表Application)
1.打印方法
app.CommandBars.ExecuteMso('FilePrint')
2.撤消最后一次操作或最后一系列操作,这些操作显示在“撤消”列表中。如果撤消操作成功,则返回 True。
表达式.Undo(Times),Times 可选 Variant 要撤消的操作的数量。
app.ActiveDocument.Undo(time)
3.将页眉页脚内容进行替换
function replaceHeaderFooterText(name, value) {
var headerRange;
var footerRange;
headerRange = app.ActiveDocument.Sections.First.Headers.Item(1).Range; //页眉Range对象
if (headerRange.Find.Execute(name)) {
headerRange.Select()
app.ActiveDocument.Selection.TypeText(value)
}
footerRange = app.ActiveDocument.Sections.First.Footers.Item(1).Range; //页眉Range对象
if (footerRange.Find.Execute(name)) {
footerRange.Select()
app.ActiveDocument.Selection.TypeText(value)
}
}
4.wps文档内容替换
// 获取文档内容
var range = app.ActiveDocument.Content
// 在区域中查找特定信息,一个布尔值,指示查找操作是否成功(name:要搜索的数据)
if (range.Find.Execute("name")) {
//选中
range.Select()
//有值替换
if (this.value) {
app.ActiveDocument.Selection.TypeText(this.value)
} else {
// 无值删除
app.Selection.Delete()
}
}
5.wps 替换书签内容 :表达式\replaceBookMarksText(Name, ReplaceBookMarksText, NameSplit, ReplaceBookMarksTextSplit)
- Name :书签名称,如果替换多个书签,需要将多个书签名称用分隔符隔开。
- ReplaceBookMarksText : 替换的书签内容。
- NameSplit :书签名称分隔符。
- ReplaceBookMarksTextSplit :书签内容分隔符。
app.replaceBookMarksText(Name, ReplaceBookMarksText);
6.判断书签是否存在,且返回书签内容
判断书签是否存在
app.ActiveDocument.Bookmarks.Exists(name)
返回书签内容
app.ActiveDocument.Bookmarks.Item(name).Range.Text;
WPS重要地址
- WPS配置文件oem.ini地址
oem.ini目录地址:
windows:
1. 安装路径\WPS Offlce\一串数字(版本号)\offlce6\cfgs\
2. 鼠标右键点击左面的wps文字图标==>打开文件位置==>在同级目录中找到cfgs目录
linux:
普通linux操作系统:
/opt/kingsoft/wps-office/office6/cfgs/
uos操作系统:
/opt/apps/cn.wps.wps-office-pro/files/kingsoft/wps-office/office6/cfgs/
- 加载项管理文件存放位置(jsaddons目录)
jsaddons目录地址:
windows:
我的电脑地址栏中输入:%appdata%\kingsoft\wps
linux:
我的电脑地址栏中输入:~/.local/share/Kingsoft/wps/
### 调试器开启和使用
1. 配置oem.ini,在support栏下配置JsApiShowWebDebugger=true
2. linux机器上需要使用quickstartoffice restart重启WPS
普通linux操作系统:
电脑终端执行quickstartoffice restart
uos操作系统:
电脑终端执行 cd /opt/apps/cn.wps.wps-office-pro/files/bin
./quickstartoffice restart
3. WPS打开后,在有文档的情况下按alt+F12(index.html页面的调试器)
4. ShowDialog和Taskpane页面的调试器,点击该弹窗或者任务窗格,按F12
如果无法打开调试器,那么说明加载项加载失败了,排查加载项管理文件是否生成,加载项管理文件中的加载项地址是否正确
设置wps样式
[feature]
iiZ07s39XJwKSU9I2xbCu5_o10=jiZ07s39XJwk99gTmjC7T-ZA10
【金山文档】银河麒麟+arm架构:
wps-office_11.8.2.10422.AK.preload.sw.withsn.JCY_arm64
https://kdocs.cn/l/cisGLdaajUQ4
【金山文档】win:setup_CN_2052_11.8.2.10912_Professional_VBA_GDJCY.exe
https://kdocs.cn/l/cvBoKcngNQWV