一、簡介
金山文檔在線預覽編輯服務，是以 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”
