vue3+webOffice合集

1、webOffice 初始化

1)officeType:

文档位置:https://solution.wps.cn/docs/web/quick-start.html#officetype

2)appId: 前端使用appId 后端需要用到AppSecret

3)fileId: 由后端返回,前端无法生成 ,与上传文件生成的文件id无关

4)mount: 前端挂载的div

5)mode: 显示模式,nomal为普通模式,simple为极简模式

文档位置:https://solution.wps.cn/docs/web/config.html#显示模式

6)wordOptions: 其他配置

文档位置:https://solution.wps.cn/docs/web/config.html#文字选项

javascript 复制代码
//注意:这里一定要设置宽高,否则不会显示
 <div id='wps' ref='wpsRef' style="width:600px;height:500px"></div>
 	
 const init = async ()=>{
 	const ele = document.getElementById('wps') 
    const instance = await webOfficeSDK.init({
      officeType: 'w', 
      appId: 'xxxx',  
      fileId: '2',
      mount: ele,
      mode: 'simple',
      wordOptions: {
        isShowDocMap: false,  //是否开启目录功能
        isBestScale: true  //打开文档默认以最佳比例显示
      } 
    })
    //注意:一定要等到ready完才做其他的操作 不然会出现模块未定义或找不到
    const ready = await this.instance.ready()
    if(ready){
      ...
      return ture
     }
     return false
   }


//初始化
onMounted(async()=>{
	const res = await init()
	if(res){
		// 其他操作 例如 请求接口数据回显到下拉组件
	}
})

2、修改wps的宽度样式

1)需求描述:与官方案例类似 ,但是需要添加一个收缩/展示按钮,当右侧表单收缩时,左侧的文档宽度应为100%,当右侧表单展示时,左侧文档恢复原样

2)实现思路

  • 左侧div设置固定的宽度和高度,例如80%,且div里面放挂载wps的div,右侧表单设置固定宽度和高度,例如20%,根据按钮的显示隐藏动态设置其宽度
javascript 复制代码
<div :style="flg?'width:80%':'width:100%'">
	<div id='wps' style="width:100%;height:100%"></div>
</div>
<div :style="flg?'width:20%':'width:0%'">
	<div id='wps'></div>
</div>

注意:按钮控件可以控制外层div的宽度动态变化,无法控制wps的宽度变化,需要使用到实例对象值的iframe对象

文档位置:https://solution.wps.cn/docs/web/instance.html

  • 设置iframe
javascript 复制代码
//上面初始化时有个ready状态
const iframe = ref(null)
 
if(ready){
 iframe = await instance.iframe
 return ture
}
//当按钮点击时(不管是收缩还是展开都设置为100%且文档自适应)
iframe.style.width = "100%"
//app 也是在ready后面获取 可参考官方文档
app.ActiveDocument.ActiveWindow.View.Zoom.Percentage = 100 //设置窗口缩放比例
app.ActiveDocument.ActiveWindow.View.Zoom.PageFit = 2  //缩放视图自适应文档窗口的尺寸
相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
朗迹 - 张伟2 小时前
Gin-Vue-Admin学习笔记
vue.js·学习·gin
古夕2 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js
武昌库里写JAVA2 小时前
Java设计模式中的几种常用设计模式
vue.js·spring boot·sql·layui·课程设计
wow_DG4 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(九):Vue2 性能优化
javascript·vue.js·性能优化
一 乐5 小时前
美食分享|基于Springboot和vue的地方美食分享网站系统设计与实现(源码+数据库+文档)
java·vue.js·spring boot·论文·毕设·美食·地方美食分享网站系统
我是日安6 小时前
从零到一打造 Vue3 响应式系统 Day 4 - 核心概念:收集依赖、触发更新
前端·vue.js
wow_DG7 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(八):Vuex 内部机制
前端·javascript·vue.js
若年封尘7 小时前
吃透 Vue 样式穿透:从 scoped 原理到组件库样式修改实战
前端·javascript·vue.js·样式穿透·scoped