这篇文章主要介绍在 web
前端如何使用 React
对接 js-sdk
。
步骤一:引入JS-SDK
首先在 index.html
通过 script
标签引入 js-sdk
。
JS-SDK仅支持非模块化引用方式。引用时,请根据实际填写版本号。
<script src="https://g.alicdn.com/IMM/office-js/1.1.19/aliyun-web-office-sdk.min.js"></script>
详细内容请参见JS-SDK版本。
步骤二:组件WebOffice.jsx
调用JS-SDK
import { useRef, useEffect } from "react";
export default function WebOffice(
{ getTokenFun, refreshTokenFun }
) {
const containerRef = useRef(null);
useEffect(() => {
// dom ready 时调用 init
init(containerRef.current);
}, []);
async function init(mount, timeout=10*60*1000) {
// 获取 token
let tokenInfo = await getTokenFun()
let ins = window.aliyun.config({
mount,
url: tokenInfo.WebofficeURL,
refreshToken: ()=>{
// timeout过期时刷新 token
return refreshTokenFun(tokenInfo).then((data)=>{
// 保存供下次 refreshTokenFun 用
Object.assign(tokenInfo, data)
return {
token: tokenInfo.AccessToken,
timeout
}
})
}
});
ins.setToken({
token: tokenInfo.AccessToken,
timeout
})
}
return (
<div
ref={containerRef.current}
style={{ width: "100%", height: "100%" }}
></div>
);
}
步骤三:如何使用 WebOffice.jsx
组件
import WebOffice from './WebOffice.jsx'
function App(){
// 定义获取 token 函数
async function getTokenFun(){
// 调用 web 服务端接口,服务端调用 IMM GenerateWebofficeToken 接口
// 返回格式如下
return {
"RefreshToken": "f1fd1a*************35ffv3",
"RequestId": "BC63*************BC89",
"AccessToken": "3de2*************ae39v3",
"RefreshTokenExpiredTime": "2022-07-06T23:18:52.856132358Z",
"WebofficeURL": "https://office-cn-shanghai.imm.aliyuncs.com/office/w/7c1a7b53d6a4002751ac4bbaea69405a01475f4a?_w_tokentype=1",
"AccessTokenExpiredTime": "2022-07-05T23:48:52.856132358Z"
}
}
// 定义刷新 token 函数
async function refreshTokenFun(){
// 调用 web 服务端接口,服务端调用 IMM RefreshWebofficeToken 接口
// 返回格式如下
return {
"RefreshToken": "f1fd1a*************34f35ffv3",
"RequestId": "BC63D2*************43943DBC89",
"AccessToken": "3de242*************00aaae39v3",
"RefreshTokenExpiredTime": "2022-07-06T23:18:52.856132358Z",
"WebofficeURL": "https://office-cn-shanghai.imm.aliyuncs.com/office/w/7c1a7b53d6a4002751ac4bbaea69405a01475f4a?_w_tokentype=1",
"AccessTokenExpiredTime": "2022-07-05T23:48:52.856132358Z"
}
}
// 文档尺寸可以通过 container-parent 样式设置
return (
<>
<div className="container-parent">
<WebOffice getTokenFun={getTokenFun} refreshTokenFun={refreshTokenFun}/>
</div>
</>
)
}
如何获取token,请看步骤一:服务端封装接口。
文档内容是否对您有帮助?