开始​

下载Demo示例

1. 我们为您提供了一个Demo示例，建议下载使用，下载地址：Demo示例
2. 下载 Demo 示例文件后，运行 npm install && npm run dev 启动

下面示例代码都已在 Demo 中对应示例，推荐对照 Demo 示例查看

1. 内嵌接入（ SDK 1.x ）版本

• 本质是 iframe 嵌套一个WPS多维表格
• 在 url 后面拼接 readonly 参数设置文件只读状态

基本使用

import { Component, createRef } from 'react'
import WebOfficeSDK_V1 from '../weboffice-sdk/web-office-sdk-v1.1.11.es'

export default class PreviewDB extends Component {
    instance: any
    container = createRef<HTMLDivElement>()

    componentDidMount(): void {
        console.error(this.container)
        this.instance = WebOfficeSDK_V1.config({
            officeType: 'd',
            url: 'https://www.kdocs.cn/l/cuI4w9PX4CwI?disablePlugins&simple=1&readonly',
            mount: this.container.current,
        })
    }

    render() {
        return <div ref={this.container} style={{ height: '400px', width: '800px' }}></div>
    }
}

• 这样就在 div 容器里面加载了一个多维表格文件
• 通过传入参数配置，控制加载内容的展示与屏蔽，以及各项功能的开启与关闭。更多详细配置可查看：更多配置

2. 内嵌接入（ SDK 3.x ）版本

环境准备

1. 保持 主页面 与 嵌入子文档页面 处于同域状态
2. 出现不同域时，要求服务端支持 CORS（跨域资源共享）机制

如：主文档使用 https://test.kdocs.cn， 嵌入子文档页面使用 docs.kdocs.cn docs.kdocs.cn 的服务端设置：Access-Control-Allow-Origin: https://test.kdocs.cn

其他头部配置可以参考 kdocs 配置：

Access-Control-Allow-Origin: https://test.kdocs.cn
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: accept, content-type, x-user-query, x-device-id, x-requested-with, x-csrftoken, accept-encoding, accept-language, x-csrf-rand, x-server-id, x-endpoint-id, x-app-id, EagleEye-TraceID, EagleEye-SessionID, EagleEye-pAppName, x-user-token, x-app-id, x-app-token, x-redirect-region-group
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Expose-Headers: accept, content-type, x-user-query, x-device-id, x-requested-with, x-csrftoken, accept-encoding, accept-language, x-csrf-rand, x-server-id, x-endpoint-id, x-app-id, EagleEye-TraceID, EagleEye-SessionID, EagleEye-pAppName, x-user-token, x-app-id, x-app-token

基本使用

import { Component, createRef } from 'react'
import WebOfficeSDK_V3 from '../weboffice-sdk/web-office-sdk-v3.4.1.es'

export default class EmbedDB extends Component {
    instance: any
    container = createRef<HTMLDivElement>()

    componentDidMount(): void {
        this.instance = WebOfficeSDK_V3.config({
            officeType: 'd',
            // embed=1 开启内嵌模式
            // disablePlugins 关闭插件
            url: 'https://365.kdocs.cn/l/cuI4w9PX4CwI?embed=1&disablePlugins',
            mount: this.container.current,
        })
    }

    render() {
        return <div ref={this.container} style={{ height: '400px', width: '800px' }}></div>
    }
}

这样就能够看到页面成功加载了一个多维表格文件