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", // 用户idcolor: "#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-dialogstyle="width: 100%; height: 100%;"title="正文":visible.sync="fileDialogVisible"fullscreen="true"><div style="width: 100%; height: 900px;"><iframeclass="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>