WPSSDK Vue 插件

描述

对 [email protected] 的二次封装，使之成为Vue的一个插件，并可以在Vue项目中简单方便的实现异步导入。

开始使用

引用

import Vue from 'vue'
import WpsWebOffice from 'wps-sdk-vue'

Vue.use(WpsWebOffice) // WpsWebOffice将会被注册为全局异步组件

<template>
    <WpsWebOffice
      v-if="createApi || viewEditApi"
      class="wps"
      :api-structor="apiStructor"
      :create-api="createApi"
      :view-edit-api="viewEditApi"
      :file="file"
      :file-type="fileType"
    />
</template>

组件选项

apiStructor

• Type: Object
• required

后端API（指createApi和viewEditApi）响应payload的数据结构。用于获取接口中的url、token和timeout。其中键固定为url（wpssdk config options参数中的url）、token（setToken方法设置的token）、tokenTimeout（setToken方法设置的token超时时间），值为payload返回的json对象中上述三个参数对应的键（或路径），例：

// apiStructor
{ url: 'wpsUrl', token: 'token', tokenTimeout: 'expires_in' }

// 后端 api payload
{
    "wpsUrl": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "token": "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    "expires_in": 600
}

// 支持路径
// apiStructor
{ url: 'wps.wpsUrl', token: 'wps.token', tokenTimeout: 'wps.expires_in' }

// 后端 api payload
{
    wps: {
        "wpsUrl": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "token": "xxxxxxxxxxxxxxxxxxxxxxxxxx",
        "expires_in": 600,
        // ...
    },
    // ...
}

createApi

• Type: String|Object
• default: null
• 与viewEditApi之间必须要求有一个不为空。

创建新文档的后端API，可为字符串，也可以为对象。传入对象时，需要设置fileTypeQueryName属性，此属性表示后端接收文件类型的search参数名，设置后会将fileType自动拼接至最终请求地址。例：

// createApi String type
'/wps_callback/getCreateFileUrlAndToken?_w_filetype=w'

// createApi Object type
{
    url: '/wps_callback/getCreateFileUrlAndToken?otherQuery=xxx', // 请求路径，可以包含协议、主机、地址、其他参数或者哈希
    fileTypeQueryName: '_w_filetype'
}
// 实际请求地址
// '/wps_callback/getCreateFileUrlAndToken?otherQuery=xxx&_w_filetype=${fileType}'

viewEditApi

• Type: String|Object
• default: null
• 与createApi之间必须要求有一个不为空。

查看或编辑文档的后端API，可为字符串，也可以为对象。传入对象时，需要设置fileUUIDQueryName属性，此属性表示后端接收文件唯一标识的search参数名，设置后会将file自动拼接至最终请求地址。例：

// viewEditApi String type
'/wps_callback/GetUrlAndTokenHandler?fileid=xxxxxx'

// viewEditApi Object type
{
    url: '/wps_callback/GetUrlAndTokenHandler?otherQuery=xxx', // 请求路径，可以包含协议、主机、地址、其他参数或者哈希
    fileUUIDQueryName: 'fileid'
}
// 实际请求地址
// '/wps_callback/GetUrlAndTokenHandler?otherQuery=xxx&fileid=${fileType}'

file

• Type: String
• default: null
• 传递viewEditApi的对象形式时，必须传递此参数。

需要查看或编辑的文档唯一标识。

fileType

• Type: String
• default: null
• 传递createApi的对象形式时，必须传递此参数。

需要创建的文件类型，值可以为'word'、'ppt'、'excel'（或'w'、'p'、's'）中的一个。

组件实例 API

sdkInstance

• Type: Object
• 只读

SDK实例化后的对象，调用其各种方法用于操作WebOffice的各种API。调用vm.sdkInstance（vm指vue组件实例）访问。

sdkConfigOptions

• Type: Object
• 只读

传入SDK config 方法的配置对象的克隆。调用vm.sdkConfigOptions（vm指vue组件实例）访问。

开发

安装依赖

npm install

启动开发服务

npm run serve