vue引入 wps在线编辑版

2023-11-21 12:49| 来源: 网络整理| 查看: 265

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"); }

跳转的页面

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); } } }; .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; }

5.调用的组件

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)); } } }; #viewFile { width: 100%; height: 100%; position: relative; left: 0; top: 0; }

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

参考：

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

【本文地址】

vue引入 wps在线编辑版

vue引入 wps在线编辑版

今日新闻

推荐新闻