vue引入 wps在线编辑版

1.先去官网下载JS
https://wwo.wps.cn/docs-js-sdk/#/base/quick-start
2.main.js

import * as WPS from './assets/web/web-office-sdk-v1.1.3.es'
Vue.prototype.wps = WPS;

点击查看，先调后端给的接口，获取关键的jtoken，jwpsUrl

  // 修改
    async change() {
      let _this = this;
      try {
        let { data } = await _this.$http.get(
          `/v1/3rd/file/getViewUrlWebPath?fileId=${_this.fileid}&model=write`
        );
        if (data.success == true) {
          let form = {};
          form.jtoken = data.data.token;
          form.jwpsUrl = data.data.wpsUrl;

          sessionStorage.setItem("wps", JSON.stringify(form));
        }
      } catch (error) {}
      console.log("fileid", this.fileid);
      // window.open("/onlineediting");
      const jump = this.$router.resolve({ name: "onlineediting" });
      window.open(jump.href, "_blank");
      // this.$router.push("/onlineediting");
    }

跳转的页面

<template>
  <div class="main">
    <div v-if="isview">
      <viewFile v-if="isview" v-bind:wpsUrl="jwpsUrl" v-bind:token="jtoken" />
    </div>
  </div>
</template>
<script>
import viewFile from "../../components/view";
export default {
  data() {
    return {
      jwpsUrl: "",
      jtoken: "",
      isview: true
    };
  },
  created() {
    let acc = JSON.parse(sessionStorage.getItem("wps"));
    console.log(acc);

    this.jwpsUrl = acc.jwpsUrl;
    this.jtoken = acc.jtoken;
  },
  // 通过组件渲染wps的 iframe 框架
  components: {
    viewFile
  },
  methods: {
    return1() {
      this.isview = false;
      console.log(123);
    }
  }
};
</script>

<style lang='scss' scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.btn {
  position: fixed;
  top: 0;
  right: 10px;
  z-index: 99;
}
</style>

5.调用的组件

<template>
  <div id="viewFile"></div>
</template>
<script>
export default {
  props: ["wpsUrl", "token"],
  data() {
    return {
      // 是否开启简易模式
      simpleMode: false,
      isCooperUsersAvatarVisible: false, //是否显示协作用户头像
      cooperUsersColor: [
        {
          userId: "xxxxxx", // 用户id
          color: "#F65B90" // 用户光标颜色
        }
      ]
    };
  },
  mounted() {
    this.openWps(this.wpsUrl, this.token);
  },
  methods: {
    openWps(url, token) {
      let _this = this;
      const wps = _this.wps.config({
        mode: _this.simpleMode ? "simple" : "normal",
        mount: document.querySelector("#app"),
        wpsUrl: url,
        commandBars: [
          // 可以配置多个组件
          {
            cmbId: "HistoryVersion",
            attributes: {
              visible: false, // 隐藏组件
              enable: false // 禁用组件， 组件显示但不响应点击事件
            }
          },
          {
            cmbId: "HistoryVersionDivider",
            attributes: {
              visible: false, // 隐藏组件
              enable: false // 禁用组件， 组件显示但不响应点击事件
            }
          },
          {
            cmbId: "HistoryRecord",
            attributes: {
              visible: false, // 隐藏组件
              enable: false // 禁用组件， 组件显示但不响应点击事件
            }
          }
        ]
      });
      wps.setToken({ token: token });
      let app = wps.Application;
      // this.console.log(JSON.stringify(app));
    }
  }
};
</script>
<style lang='scss' scoped>
#viewFile {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
}
</style>

会存在用弹框样式变了的问题，可以把组件直接换成iframe

   <!-- 查看正文 -->
    <el-dialog
      style="width: 100%; height: 100%;"
      title="正文"
      :visible.sync="fileDialogVisible"
      fullscreen="true"
    >
      <div style="width: 100%; height: 900px;">
        <iframe
          class="web-office-iframe"
          id="office-iframe"
          :src="jwpsUrl"
          scrolling="no"
          frameborder="0"
          allowfullscreen="allowfullscreen"
          webkitallowfullscreen="true"
          mozallowfullscreen="true"
          style="width: 100%; height: 100%; z-index: 3000;"
        ></iframe>
      </div>
    </el-dialog>

参考：

https://blog.csdn.net/qq_23501739/article/details/103032741
https://blog.csdn.net/weixin_42197834/article/details/106274706