Vue 引入 WPS JS-SDK

前言

因为业务觉得我们用开源插件开发的合同文件编辑不够强大，所以提出引入 WPS 的插件，满足现有合同编辑需求。

环境

Vue v2.6.14

WPS JS-SDK v2.0.4

实现

WPS 快速开始，先看看官方文档。

引入

因为我没有在 npm 上找到对应的官方包，所以我是 下载 到本地引入的。

// wps-component.vue
import WebOfficeSDK from "@/utils/web-office-sdk.js";

注册

注册也很简单，通用的方式，通过引入插件实例的内部方法初始化。

// wps-component.vue
async init() {
  // 注册wps-SDK
  this.instance = WebOfficeSDK.init({
    mode: "", // 显示模式 simple 极简，nomal 普通
    mount: "", // 挂在的 DOM 节点 ID
    appId: "", // WPS 应用 id，你在 Web Office 开发平台注册以后，新建的应用 id
    officeType: WebOfficeSDK.OfficeType.Writer,
    fileId: "",
    token: "", // 可以用来识别用户信息，具体的定义需要和后端配合
  });

  await this.instance.ready();

  // 有一些方法需要放到 WPS 实例初始化以后才能调用，具体看官方文档
},

使用

指定 DOM 节点的宽高，并挂载到该节点上，就会自动渲染。

总结

WPS JS-SDK 的使用过程非常顺滑，前端几乎不需要写什么代码，前后端总的来说，工作量都不大。

后端的工作量会更多一些，因为后端要对接 WPS 的接口，WPS 的读取、编辑和保存等操作，都需要后端提供接口支持。

WPS 的 JS-SDK 是做的比较人性化的一个插件了。

代码

<template>
  <a-card :bordered="false">
    <div class="web-office" id="web-office" />
  </a-card>
</template>

<script>
  import WebOfficeSDK from "@/utils/web-office-sdk.js";
  import Cookie from "js-cookie";

  export default {
    name: "Index",
    props: {
      fileId: {
        type: String,
        default: "",
      },
      onlyReady: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        instance: {},
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      async init() {
        // 注册wps-SDK
        this.instance = WebOfficeSDK.init({
          mount: "#web-office", // 挂在的 DOM 节点 ID
          appId: "", // WPS 应用 id，你在 Web Office 开发平台注册以后，新建的应用 id
          officeType: WebOfficeSDK.OfficeType.Writer, // 打开文件类型，我这个是 word 文档
          fileId: this.fileId, // 文件 id
        });

        // 用来检测文件是否打开成功
        this.instance.ApiEvent.AddApiEventListener("fileOpen", (data) => {
          console.log("fileOpen: ", data);
        });

        await this.instance.ready();

        // 是否仅读
        if (this.onlyReady) {
          this.instance.Application.ActiveDocument.SetReadOnly({
            Value: true,
          });
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  .web-office {
    height: 600px;
    width: 100%;
  }
</style>