WebOfficeWidget 使用说明-阿里云帮助中心

本文介绍 WebOfficeWidget 的使用方法。

1. 构造方法

"自定义widget(iframe)挂载点" 和自定义样式：

iframe 默认会挂载到 body 下，可根据需要自定义 iframe 的挂载点，比如：

<div id="container"></div>

import { WebOfficeWidget } from 'aliyun-pds-js-widget';

const domain_id = 'bj1'; // 您的 domain_id
const token_info = {
  access_token: 'xxxxx',
  refresh_token: 'xxxxx',
  // ...
};

const widgetOpts = {
  widget_endpoint: `https://${domain_id}.apps.aliyunpds.com`,
  // 挂载点
  container: document.querySelector('#container'),
  // 自定义样式
  iframe_style: {
    width: '100%',
    height: '100%',
  },
  // 嵌入的页面
  module: 'office/viewer',
  token_info,
  // 配置过期获取token函数。
  refresh_token_fun: async () => {
    // 业务处理逻辑，调用服务端封装的refreshToken接口。
    // new_token_info 从服务端获取
    // let new_token_info = await fetch(.....)
    return new_token_info;
  },
  domain_id,
  drive_id: '1',    // 文档文件所在drive的ID
  file_id: 'xxxx',  // 文档文件ID
};

const ins = new WebOfficeWidget(widgetOpts);

WebOfficeWidget 构造参数：

字段	类型	必选	说明
module	string	是	组件名称。目前支持2种： `office/preview`：文档预览 `office/editor`：文档编辑
widget_endpoint	string	是	组件UI的入口 url。一般为domain的apps域名。
container	string or HTMLElement	是	组件挂载入口元素
lang	string		设置语言。支持 zh_CN, en_US。首次默认使用浏览器的 navigator.language。
token_info	Object	是	访问令牌, JSON Object, 至少包含 `access_token` 字段。
share_token	string		分享访问令牌，操作分享的相关资源时有用。
refresh_token_fun	Function	是	access_token 过期刷新 token 方法 ,需要返回新的 token_info
refresh_share_token_fun	Function		share_token 过期刷新 share_token 方法, 需要返回新的 share_token
iframe_style	Object		自定义 iframe 样式
iframe_attr	Object		自定义 iframe Attribute
domain_id	string	是	Domain的ID。
drive_id	string		drive_id 和 share_id 必选其一。
share_id	string		drive_id 和 share_id 必选其一。
file_id	string	是	文档文件ID。
revision_id	string		多版本文件的版本ID。

2. 实例方法

调用示例：

const ins = new WebOfficeWidget(widgetOpts)

// 调用方法
ins.setLang('zh_CN')

WebOfficeWidget 支持方法：

方法名	说明	参数说明
setToken	设置组件登录态	JSON Object, token信息
removeToken	清除组件登录态	无
setLang	设置组件语言	字符串，浏览器支持的语言类型，横线“-”替换成下划线“_”，如浏览器中的简体中文“zh-CN”对应的值为“zh_CN”
setShareToken	设置组件 share_token	string
on	监听事件	详见下文
destroy	销毁组件	无

3. 监听事件

为组件开启事件监听，当组件发生指定事件时，会回调指定的方法。

示例：

const ins = new WebOfficeWidget(widgetOpts);

ins.on('事件名', function(data) {
  // do something...
})

支持的事件

事件名	说明	payload参数
load	组件首次渲染完成触发	无
error	监听组件错误	对象，当组件发生错误时触发，如{code: "TokenExpired", mesage:"xxx"}
tokenChanged	监听组件token变化	对象，`token`信息或`null`。
shareTokenChanged	监听组件share_token变化	对象，`share_token`信息或`null`。
langChanged	监听组件语言变化	字符串，语言名称，如`zh_CN`。

error 事件部分错误代码

TokenInvalid：token无效或未设置
TokenExpired：token过期

其他错误码参考：错误处理