主题
快速开始
下面将通过 4 个步骤介绍如何快速使用 js-sdk。
下载
在使用之前,请先下载最新版本的 js-sdk 代码。下载地址
引用
js-sdk 提供了支持非模块化以及 AMD、CommonJS、ES6 多种模块化规范的包,下面以非模块化方式引用为例,讲解 js-sdk 的快速上手。
<!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>
<script src="./web-office-sdk.umd.js"></script>
<script>
console.log('引入后可以开始使用 jssdk 了!')
console.log(WebOfficeSDK)
</script>
</body>
</html>
提示
在这份代码中,我们在 HTML 代码中引用了 js-sdk:
<script src="./web-office-sdk.umd.js"></script>
初始化
引用之后,就可以通过初始化配置,让 js-sdk 在配置的挂载节点下创建一个 iframe,并自动初始化相关数据和事件。
挂载节点指 js-sdk 插入 iframe 时挂载的节点,如果没有配置挂载节点则默认使用默认节点
提示
请在 DOMContentLoaded 事件被触发后,确保挂载节点存在,再执行初始化操作。
window.onload = function () {
const jssdk = WebOfficeSDK.config({
url: '在线文档预览地址'
})
// 如果需要对 iframe 进行特殊的处理,可以通过以下方式拿到 iframe 的 dom 对象
console.log(jssdk.iframe)
// 打开文档结果
jssdk.on('fileOpen', data => {
console.log(data.success)
})
}