systemdemo.html
11.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>业务系统模拟页面</title>
<script type="text/javascript" src="./wpsjsrpcsdk.js"></script>
<script type="text/javascript" src="./project.js"></script>
</head>
<body>
<div class="divTitle">XXX业务系统-前端模拟页面</div>
<div>
<div class="partItem">单进程模式：</div>
<div class="divItem">
<li><a href="#" onclick="openOfficeFile('http://我是文件的服务端地址')">打开业务系统文件</a></li>
</div>
<div class="divItem">
<li><a href="#" onclick="onDivClick('getDocumentName', false)">获取wps当前打开的文件的文件名</a></li>
</div>
<div class="divItem">
<li><a href="#" onclick="onDivClick('newDocument', true)">新建一个文件</a></li>
</div>
<div class="divItem">请点击wps加载项“给业务系统发通知”按钮，体验加载项主动发送消息</div>
<div class="divItem">消息内容：<span style="font-weight: bolder;color: red;" id="webnotifyspan"></span></div>
</div>
<div id='tishi'>
<p style="text-align: center;">正在打开文件</p>
<p>
<progress id="openFile" value="0" max="100">
<p style="text-align: center;">当前进度<span id="openfilespan" style="color:crimson;">0</span>%</p>
</progress>
</p>
</div>
<div>
<div class="partItem">多进程模式：</div>
<li><a href="#" onclick="openFileInSilentMode()">新建客户端：静默打开文件</a>
</li>
<div id="rootClients"></div>
</div>
<div class="divNote">
<hr>
<p>
更详细的与B/S业务系统集成的能力相关的示例，请参考：
<span style="font-weight: bolder;color: slateblue;"><a
href="https://code.aliyun.com/zouyingfeng/wps/blob/master/README.md" target="_blank">
https://code.aliyun.com/zouyingfeng/wps/blob/master/README.md
</a></span>
</p>
<p>
和我们一起构建WPS开发者社区，可以来<a href="https://zhuanlan.zhihu.com/c_1256350603921915904"
target="_blank">「WPS二次开发」</a>转转，留下您的评论。
</p>
</div>
</body>
<script>
//实际的开发中，业务系统与wps加载项的交互代码如下：
var callbackFunc = function (result) {
if (result.status == 0) {
//下面这行代码用来注册从wps加载项返回的消息的接收函数
WpsInvoke.RegWebNotify(projInfo.type, projInfo.name, function (messageText) {
var span = document.getElementById("webnotifyspan")
span.innerHTML = messageText
})
alert(result.response)
}
else
alert(result.message)
}
function openOfficeFile(param) {
var invokeParam = {
flag: "openOfficeFile",
filepath: param
} //根据需求任意定义
WpsInvoke.InvokeAsHttp(
projInfo.type,
projInfo.name, //wps加载项的名字，在实际项目中写上对应的名字
"openOfficeFileFromSystemDemo", //要调用的在wps加载项中的函数名
JSON.stringify(invokeParam), //调用的在wps加载项中的函数要传递的数据，是一个json对象，根据业务系统需求任意定义
callbackFunc) //回调函数，wps加载项中InvokeFromSystemDemo这个函数的返回值作为这个函数的参数
}
function onDivClick(param, showToFront) {
var invokeParam = {
按需求定义: "安需求给值",
Index: param,
AppType: projInfo.type,
自定义: {
xxx定义: "xxx值"
}
} //根据需求任意定义
WpsInvoke.InvokeAsHttp(
projInfo.type,
projInfo.name, //wps加载项的名字，在实际项目中写上对应的名字
"InvokeFromSystemDemo", //要调用的在wps加载项中的函数名
JSON.stringify(invokeParam), //调用的在wps加载项中的函数要传递的数据，是一个json对象，根据业务系统需求任意定义
callbackFunc, //回调函数，wps加载项中InvokeFromSystemDemo这个函数的返回值作为这个函数的参数
showToFront) //设置wps是否显示到最前面来
}
//WebNotifyUseTimeout()
var clientCount = 0;
var dialogProgress; //打开文件进度计数
var interval; //window.setInterval对象
function openFileInSilentMode() {
var dlg = document.getElementById("tishi");
dlg.style.display = 'block';
dialogProgress = 0
interval = setInterval(updateProgress, 100)
document.body.style.pointerEvents = "none"
var houzui = ".xlsx";
if (projInfo.type == "wps")
houzui = ".docx"
else if (projInfo.type == "wpp")
houzui = ".pptx"
var url = location.protocol + "//" + location.host + "/.debugTemp/" + projInfo.type + "Demo" + houzui;
var wpsClient = new WpsClient(projInfo.type);
var eleId = "clientId" + (++clientCount);
var WebNotifycount = 0;
wpsClient.onMessage = function (messageText) {
++WebNotifycount;
var spanDiv = document.getElementById("webnotifyCount" + eleId);
spanDiv.innerText = "(次数：" + WebNotifycount + ")：";
var span = document.getElementById("webnotifyspan" + eleId);
span.innerHTML = messageText;
}
//先静默启动客户端，在回调函数里面实现打开大文件
wpsClient.StartWpsInSilentMode(projInfo.name, function () {
var invokeParam = {
按需求定义: "安需求给值",
Index: 'OpenFile',
AppType: projInfo.type,
filepath: url, //要打开的文件路径
自定义: {
xxx定义: "xxx值"
}
} //根据需求任意定义
wpsClient.InvokeAsHttp(
projInfo.name, //wps加载项的名字，在实际项目中写上对应的名字
"InvokeFromSystemDemo", //要调用的在wps加载项中的函数名
JSON.stringify(invokeParam), //调用的在wps加载项中的函数要传递的数据，是一个json对象，根据业务系统需求任意定义
openFileCallbackFunc, //回调函数，wps加载项中InvokeFromSystemDemo这个函数的返回值作为这个函数的参数
false) //设置wps是否显示到最前面来
});
//打开文件成功后的交互代码
function openFileCallbackFunc(result) {
clearInterval(interval);
//console.log(JSON.stringify(result))
if (result.status !== 0) {
setProgress(0)
var dlg = document.getElementById("tishi");
dlg.style.display = 'none';
document.body.style.pointerEvents = "auto"
alert(result.message)
return;
}
setProgress(100);
wpsClient.ShowToFront(projInfo.name, function () {
setProgress(0)
var dlg = document.getElementById("tishi");
dlg.style.display = 'none';
document.body.style.pointerEvents = "auto"
});
var rootElement = document.getElementById("rootClients");
var ele = document.createElement("div");
ele.className = "addonItem";
ele.id = eleId;
ele.client = wpsClient;
ele.innerHTML =
'<div class="clientItem">客户端' + clientCount + '\n' +
'<div class="divItem"><li><a href="#" onclick="onClientGetFileName(' + "'" + ele.id + "'" + ',' + "'getDocumentName'" + ', false' + ')">获取wps当前打开的文件的文件名</a></li></div>\n' +
'<div class="divItem"><li><a href="#" onclick="onClientGetFileName(' + "'" + ele.id + "'" + ',' + "'newDocument'" + ', true' + ')">新建一个文件</a></li></div>\n' +
'<div class="divItem">加载项主动发送的消息内容<span id="webnotifyCount' + ele.id + '"></span><span style="font-weight: bolder;color: red;" id="webnotifyspan' + ele.id + '"></span></div>'
'</div>';
rootElement.appendChild(ele);
}
}
function onClientGetFileName(clientId, param, showToFront) {
var invokeParam = {
按需求定义: "安需求给值",
Index: param,
AppType: projInfo.type,
自定义: {
xxx定义: "xxx值"
}
} //根据需求任意定义
var ele = document.getElementById(clientId);
ele.client.InvokeAsHttp(
projInfo.name, //wps加载项的名字，在实际项目中写上对应的名字
"InvokeFromSystemDemo", //要调用的在wps加载项中的函数名
JSON.stringify(invokeParam), //调用的在wps加载项中的函数要传递的数据，是一个json对象，根据业务系统需求任意定义
clientCallbackFunc, //回调函数，wps加载项中InvokeFromSystemDemo这个函数的返回值作为这个函数的参数
showToFront) //设置wps是否显示到最前面来
function clientCallbackFunc(result) {
if (result.status !== 0)
alert(result.message)
else {
if (result.response == "Failed to send message to WPS.") {
ele.client.IsClientRunning(function (status) {
if (status.response == "Client is running.")
alert("任务发送失败，WPS 正在执行其他任务，请前往WPS完成当前任务")
else
alert("WPS 客户端被关闭了!")
})
} else {
alert(result.response)
}
}
}
}
function updateProgress() {
setProgress(++dialogProgress);
}
function setProgress(newValue) {
if (newValue < 90 || newValue == 100) {
var progress = document.getElementById('openFile');
progress.value = newValue;
var span = document.getElementById("openfilespan")
span.innerHTML = newValue;
}
}
</script>
<style>
.divTitle {
margin-top: 30px;
margin-bottom: 20px;
font-size: 40px;
font-weight: bolder;
text-align: center;
}
.divItem {
margin: 5px;
}
.divNote {
margin-top: 60px;
}
#rootClients {
padding-left: 20px;
font-size: 15px;
}
.clientItem {
margin: 5px;
}
.partItem {
font-size: 20px;
margin: 5px;
padding-top: 20px;
}
#tishi {
position: absolute;
left: 600px;
min-height: 150px;
border: 1px solid black;
padding: 10px 12px;
display: none;
background: #fff;
}
</style>
</html>