Skip to content
本页内容

快速开始

下面将通过 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)
  })
}