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>

参考：

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

vue引入 wps在线编辑版相关推荐

vue引入 wps在线编辑版，可进行预览，编辑，打印等功能。
项目需求是, 在vue中进行文档管理, 因此最后选择了wps在线编辑版本. 一.使用方法在官网下载js-sdk js文件全局引入 import * as WPS from './assets/js ...
wps在线编辑梳理（此处整理了对接过后容易出错的地方）
一.开发准备 1.申请服务商申请服务商流程 2.接入方式接入方式分为文件预览.文件编辑和文件新建 3 种. 以文件预览为例,文件预览适用于文件已存在公网服务器的场景. 例如接入 Word(文字)预 ...
vue开发可在线编辑简历的webApp
项目初始在一个阳光明媚的下午,学院就业指导老师让我们每个人做一份简历,然后打印上交.后回到宿舍,苦苦在网上寻找,未果.因为不要钱的模板太丑,好看的模板得花钱...,像我等穷逼,哪里有什么闲钱.于是, ...
Vue引入Udesk在线打电话组件
业务需求需要在我们的CRM后台引入在线打电话功能可以直接拨打电话给客户,首先需要在Vue中引入Udesk打包后的文件,在Vue项目中有两个地方用来存放静态资源文件,分别是assets和static文 ...
vue实现xml在线编辑功能
先看效果避免误会这是一个在线编辑器我们可以在这上面随意的编写xml代码格式我们修改上面的内容之后就可以在控制台输出内容如果这正是您想要的东西那就可以先创建一个vue项目我们先引入依赖 ...
Cordova实现自定义下载插件和WPS在线预览
Cordova实现自定义下载插件和WPS在线预览简要描述点击下载链接,请求URL,判断手机是否安装WPS,如果安装则调用wps在线编辑,没有安装则对文件进行下载,并在通知栏进行通知,显示下载进度( ...
在线编辑、在线预览、在线转换，基于wps.js + java + react / vue，无需任何插件，零安装
基于wps.js在线编辑.在线预览.文档转换前台vue / react,后台java终于开源啦,无需任何插件,零安装,可以直接配置完打包部署,也可直接集成项目中,或者二次开发,后续会不定期更新,有好的 ...
Vue中使用mavonEditor插件实现markdown在线编辑
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_若依前后端分离在上面的基础上,怎样实现markdown在 ...
Vue实现在线编辑excel
目录 luckysheet 1.插件引入 2.声明excel在线预览编辑组件 3.excelJs分解Dom为excel文件流 luckysheet文档地址 exceljs文档地址前言介 ...

vue引入 wps在线编辑版

vue引入 wps在线编辑版相关推荐

最新文章

热门文章