接入流程

本文将帮助您了解如何在网页应用中接入并使用 OfficeSDK 提供的 JS SDK，以实现在线文档的嵌入、编辑与交互功能。

前提：本地运行 OfficeSDK 并实现回调配置

本地运行 OfficeSDK 程序，上传许可证；

实现回调服务，并在 OfficeSDK 控制后台配置好回调服务、完成回调接口的联调。

第 1 步：安装 JS SDK

您可以通过 npm 或 yarm 安装 JS SDK。

使用 npm 安装：

npm install --save @officesdk/web

使用 yarn 安装：

yarn add @officesdk/web

使用 CDN 安装：

<script src="https://unpkg.com/@officesdk/web@^1/umd/index.js"></script>

第 2 步：引入并初始化 iframe

引入 JSSDK 后，会在全局对象上挂载一个 OfficeSDK 对象，调用该对象提供的 createSDK() 方法，完成文档的初始化。

通过模块系统直接加载（ESM、CJS）

步骤如下：

导入 SDK；

调用 createSDK 方法，传入必要的参数，详见下文《初始化参数》；

处理返回的 Promise，获得 officesdk 实例。

使用示例：

import { createSDK } from '@officesdk/web'

async function loadSDK() {
  // 获取 sdk 实例
  const sdk = createSDK({
    endpoint: 'https://office-sdk-endpoint/'
    path: '文件path,可选',
    token: '识别用户请求的 token',
    fileId: '系统中的 file id',
    fileType: FileType.Document,
    root: document.getElementById('sdk'),
    lang: 'en-US' // 未指定此参数时使用默认中文
    userQuery: {  // 自定义参数，用于服务器回调参数
      userName: 'John Doe', 
      userId: '1234', 
    },
    settings: {  // 初始化设置
          menu: { // 工具栏菜单
            custom: [
              { type: 'link', url: 'https://www.baidu.com', text: '测试1', name: 'test1' },
              {
                name: 'test',
                type: 'button',
                label: '按钮测试',
                callback: (): void => {
                  console.log('按钮测试');
                },
              },
            ],
          },
        },

  });
  
  // 获取编辑器实例
  const document = await sdk.connect();
  
  // 调用编辑器相关方案
  document.getSelection()
  ...
}

初始化参数

必要参数	是否必须	类型	说明
endpoint	是	string	提供服务访问的域名地址
token	是	string	用户凭证，由接入方服务端提供
fileId	是	string	文档 ID，用户自定义
fileType	是	FileType	文件的类型，请根据 fileId 对应的文件的实际类型设置，详见下表
mode	否	string	编辑器模式，当前仅支持设置为 standard
role	否	string	编辑器在 standard 模式下的权限模式，仅支持设置为 editor, viewer。"editor" - 编辑模式；"viewer" - 预览模式；未指定此参数时默认为 viewer
lang	否	string	系统语言；仅支持设置为 zh-CN, en-US；未指定此参数时，使用浏览器默认语言（若浏览器默认语言系统不支持，则使用 zh-CN）
root	否	HTMLElement	加载 SDK iframe 的根节点。也可以在创建实例后再将 sdk.iframe 加载到页面任意位置
setting	否	{ menu?: { custom?: EditorMenuCustomButton[] } }	加载sdk的自定义设置，比如自定义工具栏。参见下文 EditorMenuCustomButton 类型

FileType 枚举值

文件类型	值	文件格式
Document	0	.doc, .docx, .wps
Spreadsheet	1	.xls, .xlsx, .csv, .xlsm
Presentation	2	.ppt, .pptx
Pdf	5	.pdf

EditorMenuCustomButton

type EditorMenuCustomButton = {
    /**
     * 按钮名称
     */
    name: string;
    /**
     * 链接
     */
    type: 'link';
    /**
     * 按钮文本
     */
    text: string;
    /**
     * 链接地址
     */
    url: string;
} | {
    /**
     * 按钮名称
     */
    name: string;
    /**
     * 按钮，点击后触发 callback 回调
     */
    type: 'button';
    /**
     * 按钮文本
     */
    label: string;
    /**
     * 按钮图标，可以是 base64 的图片信息，也可以是图片 url
     */
    icon?: string;
    /**
     * 按钮点击事件
     */
    callback: () => void;
};

第 3 步：使用 SDK 和编辑器实例

初始化完成后，返回的 sdk 为 OfficeSDK 实例，后续将通过该实例进行事件监听和页面定制等操作。
或者通过 OfficeSDK 实例获取到编辑器实例，调用 JS API 直接和文档内容交互。

参考《在线预览编辑服务 - JS API》了解使用 API 的更多细节。

前提：本地运行 OfficeSDK 并实现回调配置#

第 1 步：安装 JS SDK#

第 2 步：引入并初始化 iframe#

通过模块系统直接加载（ESM、CJS）#