一、简介
金山文档在线预览编辑服务，是以 H5 网页的形式提供，支持全平台接入。
在线服务完整的使用，需要“对接方前端+服务端”的参与。
- 前端：根据文件格式（Word、Excel、PPT 等）生成访问金山文档的 url，通过 js-sdk 接入，调用相关 API 来实现相关需求
- 服务端：根据金山文档在线预览编辑服务提供的回调 API 实现接口，将数据存储到对接方的公网服务器中
二、申请服务商
申请地址：https://open.wps.cn/apply-developer
需要上传营业执照
三、服务端
3-1、服务端接入
接入地址：https://wwo.wps.cn/docs/server/fast-access/technical-framework
demo地址：https://wwo.wps.cn/docs/server/fast-access/demo/
3-2、接入方式
3-2-1、文件预览
需要实现的接口
3-2-2、文件编辑
需要实现的接口
3-2-3、文件新建
需要实现的接口
四、前端
4-1、说明
Web Office SDK for Javascript 是在线 Office 文档编辑面向网页开发者提供的网页开发工具包，后续的文档将简称 js-sdk。
通过使用 js-sdk，网页开发者可以为自定义界面显示、页面状态、监听事件等能力，同时可以直接使用高级 API 来操作文档，为用户提供更优质的网页体验。
4-2、前端接入
接入地址：https://wwo.wps.cn/docs/front-end/introduction/quick-start
4-3、下载
下载地址：https://wwo.wps.cn/docs/update-log/jssdk/jssdk-update-log
4-4、HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebOffice</title>
</head>
<body>
<div class="w_custom_mount"></div>
</body>
</html>
4-5、JS引用
js-sdk 提供了支持非模块化以及 AMD、CommonJS、ES6 多种模块化规范的包
各种包的引用
var WebOfficeSDK = require('../lib/js/wpssdk');
var currentToken = '';
window.onload = function() {
const jssdk = WebOfficeSDK.config({
// 开发的时候可以先前往 kdocs.cn 获取预览地址
// 例如：https://www.kdocs.cn/p/xxxx?from=docs
url: '在线文档预览地址',
});
// 如果需要对 iframe 进行特殊的处理，可以通过以下方式拿到 iframe 的 dom 对象
console.log(jssdk.iframe);
$(".w_custom_mount").html(jssdk.iframe);
$(".web-office-default-container").remove();
// 打开文档结果
jssdk.on('fileOpen', function(data){
console.log(data.success);
});
// 首次设置 token 和 后续刷新，token都是通过调用此API（如果没有设置token的话，会报token失败的问题）
jssdk.setToken({
token : currentToken
});
};
或者
var WebOfficeSDK = require('../lib/js/wpssdk');
var currentToken = '';
const jssdk = WebOfficeSDK.config({
// 开发的时候可以先前往 kdocs.cn 获取预览地址
// 例如：https://www.kdocs.cn/p/xxxx?from=docs
url: '在线文档预览地址',
});
// 如果需要对 iframe 进行特殊的处理，可以通过以下方式拿到 iframe 的 dom 对象
console.log(jssdk.iframe);
$(".w_custom_mount").html(jssdk.iframe);
$(".web-office-default-container").remove();
// 打开文档结果
// jssdk.on('fileOpen', function(data){
// console.log(data.success);
// });
// 文件名重命名的事件回调
jssdk.on('fileNameChange', function(e){
$(".ocw_docTitle").html(e.fileName);
});
// 首次设置 token 和 后续刷新，token都是通过调用此API（如果没有设置token的话，会报token失败的问题）
jssdk.setToken({
token : currentToken
});
4-6、自定义页面
4-6-1、mode
| 选项值 | 说明 | 是否默认选项 |
|---|---|---|
| normal | 普通模式，展示所有功能界面 | 是 |
| simple | 极简模式，不显示头部和工具栏 | 否 |
const jssdk = WebOfficeSDK.config({
url : redirect_url,
mode: 'simple'
});
$(".w_custom_mount").html(jssdk.iframe);
$(".web-office-default-container").remove();
mode为simple：不显示头部和工具栏
mode为normal：显示头部和工具栏
4-6-2、commonOptions
| 配置项 | 说明 |
|---|---|
| isShowTopArea | 是否显示顶部区域 |
| isShowHeader | 是否显示头部区域 |
| iisBrowserViewFullscreen | 是是否在浏览器区域全屏，为 true 不允许全屏 |
| iisIframeViewFullscreen | 是是否在 iframe 区域内全屏，为 true 不允许全屏 |
const jssdk = WebOfficeSDK.config({
url : redirect_url,
commonOptions: {
isShowTopArea: true, // 隐藏顶部区域（头部和工具栏）
isShowHeader: false, // 隐藏头部区域
isBrowserViewFullscreen: false, // 是否在浏览器区域全屏
isIframeViewFullscreen: false, // 是否在 iframe 区域内全屏
}
});
$(".w_custom_mount").html(jssdk.iframe);
$(".web-office-default-container").remove();
isShowHeader为false：显示工具栏
4-6-3、commandBars
| ID | 说明 |
|---|---|
| cmbId | 组件ID |
| attributes | 属性 |
attributes的说明：
| 属性 | 支持 | 说明 |
|---|---|---|
| visible | boolean | 组件显示切换（默认 true） |
| enable | boolean | 组件状态切换（默认 true），禁用或者开启组件 |
const jssdk = WebOfficeSDK.config({
url : redirect_url,
commandBars: [{
cmbId: 'HeaderLeft', // 组件 ID
attributes: {
visible: false, // 隐藏组件
enable: false, // 禁用组件，组件显示但不响应点击事件
}
}]
});
$(".w_custom_mount").html(jssdk.iframe);
$(".web-office-default-container").remove();
左侧的“标题+自动保存所有内容”：隐藏
五、注意
5-1、要将WPS的项目部署到远程
5-2、文件存储到阿里云，阿里云的 Bucket权限 或者 文件权限 要为 公共读写，不能为 私有
5-3、出现报错的话，一般是数据库、回调地址的方法有问题、存储文件的权限要公共读写
5-4、重命名文件名时，出现“只限文档所有者可重命名”，可通过设置user_acl
通过设置user_acl的“rename=1”
网友评论