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#%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F

6)wordOptions: 其他配置

文档位置:https://solution.wps.cn/docs/web/config.html#%E6%96%87%E5%AD%97%E9%80%89%E9%A1%B9

//注意:这里一定要设置宽高,否则不会显示<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%,根据按钮的显示隐藏动态设置其宽度
<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
//上面初始化时有个ready状态
const iframe = ref(null)if(ready){iframe = await instance.iframereturn ture
}
//当按钮点击时(不管是收缩还是展开都设置为100%且文档自适应)
iframe.style.width = "100%"
//app 也是在ready后面获取 可参考官方文档
app.ActiveDocument.ActiveWindow.View.Zoom.Percentage = 100 //设置窗口缩放比例
app.ActiveDocument.ActiveWindow.View.Zoom.PageFit = 2  //缩放视图自适应文档窗口的尺寸

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/66902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2025牛客寒假算法营2

A题 知识点&#xff1a;模拟 打卡。检查给定的七个整数是否仅包含 1,2,3,5,6 即可。为了便于书写&#xff0c;我们可以反过来&#xff0c;检查这七个整数是否不为 4 和 7。 时间 O(1)&#xff1b;空间 O(1)。 #include <bits/stdc.h> using namespace std;signed main()…

记录一次k8s起不来的排查过程

我在k8s集群&#xff0c;重启了一个node宿主机&#xff0c;竟然发现kubelet起不来了&#xff01;报错如下 这个报错很模糊&#xff0c;怎么排查呢。这样&#xff0c;开两个界面&#xff0c;一个重启kubelet&#xff0c;一个看系统日志(/var/log/message:centos&#xff0c;/va…

Docker Desktop 在Windows 环境中开发、测试和运行容器化的应用程序

Docker 为 Windows 提供了专门的桌面版工具&#xff0c;称为 Docker Desktop&#xff0c;它允许你在 Windows 环境中开发、测试和运行容器化的应用程序。 如何在 Windows 上使用 Docker Docker Desktop Docker Desktop 是一个专为 Windows 设计的应用程序&#xff0c;它简化了…

仿 RabbitMQ 的消息队列3(实战项目)

七. 消息存储设计 上一篇博客已经将消息统计文件的读写代码实现了&#xff0c;下一步我们将实现创建队列文件和目录。 实现创建队列文件和目录 初始化 0\t0 这样的初始值. //创建队列对应的文件和目录&#xff1a;public void createQueueFile(String queueName) throws IO…

HTTP 配置与应用(局域网)

想做一个自己学习的有关的csdn账号&#xff0c;努力奋斗......会更新我计算机网络实验课程的所有内容&#xff0c;还有其他的学习知识^_^&#xff0c;为自己巩固一下所学知识&#xff0c;下次更新HTTP 配置与应用&#xff08;不同网段&#xff09;。 我是一个萌新小白&#xf…

root用户Linux银河麒麟服务器安装vnc服务

安装必要桌面环境组件 yum install mate-session-manager -y mate-session #确定是否安装成功安装vnc服务器 yum install tigervnc-server -y切换到root为root得vnc设置密码 su root vncpasswd给root用户设置vnc服务器文件 vi /etc/systemd/system/vncserver:1.service [Un…

理解深度学习pytorch框架中的线性层

文章目录 1. 数学角度&#xff1a; y W x b \displaystyle y W\,x b yWxb示例 2. 编程实现角度&#xff1a; y x W T b \displaystyle y x\,W^T b yxWTb3. 常见错误与易混点解析4. 小结参考链接 在神经网络或机器学习的线性层&#xff08;Linear Layer / Fully Connect…

C#Object类型的索引,序列化和反序列化

前言 最近在编写一篇关于标准Mes接口框架的文章。其中有一个非常需要考究的内容时如果实现数据灵活和可使用性强。因为考虑数据灵活性&#xff0c;所以我一开始选取了Object类型作为数据类型&#xff0c;Object作为数据Value字段&#xff0c;String作为数据Key字段&#xff0c…

大模型应用与部署 技术方案

大模型应用与部署 技术方案 一、引言 人工智能蓬勃发展,Qwen 大模型在自然语言处理领域地位关键,其架构优势尽显,能处理文本创作等多类复杂任务,提供优质交互。Milvus 向量数据库则是向量数据存储检索利器,有高效索引算法(如 IVF_FLAT、HNSWLIB 等)助力大规模数据集相似…

【Prometheus】Prometheus如何监控Haproxy

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

C# 控制打印机:从入门到实践

在开发一些涉及打印功能的应用程序时&#xff0c;使用 C# 控制打印机是一项很实用的技能。这篇文章就来详细介绍下如何在 C# 中实现对打印机的控制。 一、准备工作 安装相关库&#xff1a;在 C# 中操作打印机&#xff0c;我们可以借助System.Drawing.Printing命名空间&#x…

Go语言中的值类型和引用类型特点

一、值类型 值类型的数据直接包含值&#xff0c;当它们被赋值给一个新的变量或者作为参数传递给函数时&#xff0c;实际上是创建了原值的一个副本。这意味着对新变量的修改不会影响原始变量的值。 Go中的值类型包括&#xff1a; 基础类型&#xff1a;int&#xff0c;float64…

GPT 结束语设计 以nanogpt为例

GPT 结束语设计 以nanogpt为例 目录 GPT 结束语设计 以nanogpt为例 1、简述 2、分词设计 3、结束语断点 1、简述 在手搓gpt的时候&#xff0c;可能会遇到一些性能问题&#xff0c;即关于是否需要全部输出或者怎么节约资源。 在输出语句被max_new_tokens 限制&#xff0c…

《探秘:人工智能如何为鸿蒙Next元宇宙网络传输与延迟问题破局》

在元宇宙的宏大愿景中&#xff0c;流畅的网络传输和低延迟是保障用户沉浸式体验的关键。鸿蒙Next结合人工智能技术&#xff0c;为解决这些问题提供了一系列创新思路和方法。 智能网络监测与预测 人工智能可以实时监测鸿蒙Next元宇宙中的网络状况&#xff0c;包括带宽、延迟、…

深入MapReduce——计算模型设计

引入 通过引入篇&#xff0c;我们可以总结&#xff0c;MapReduce针对海量数据计算核心痛点的解法如下&#xff1a; 统一编程模型&#xff0c;降低用户使用门槛分而治之&#xff0c;利用了并行处理提高计算效率移动计算&#xff0c;减少硬件瓶颈的限制 优秀的设计&#xff0c…

macOS安装Gradle环境

文章目录 说明安装JDK安装Gradle 说明 gradle8.5最高支持jdk21&#xff0c;如果使用jdk22建议使用gradle8.8以上版本 安装JDK mac系统安装最新&#xff08;截止2024.9.13&#xff09;Oracle JDK操作记录 安装Gradle 下载Gradle&#xff0c;解压将其存放到资源java/env目录…

五国十五校联合巨献!仿人机器人运动与操控:控制、规划与学习的最新突破与挑战

作者&#xff1a; Zhaoyuan Gu, Junheng Li, Wenlan Shen, Wenhao Yu, Zhaoming Xie, Stephen McCrory, Xianyi Cheng, Abdulaziz Shamsah, Robert Griffin, C. Karen Liu, Abderrahmane Kheddar, Xue Bin Peng, Yuke Zhu, Guanya Shi, Quan Nguyen, Gordon Cheng, Huijun Gao,…

CVPR 2024 无人机/遥感/卫星图像方向总汇(航空图像和交叉视角定位)

1、UAV、Remote Sensing、Satellite Image(无人机/遥感/卫星图像) Unleashing Unlabeled Data: A Paradigm for Cross-View Geo-Localization ⭐codeRethinking Transformers Pre-training for Multi-Spectral Satellite Imagery ⭐codeAerial Lifting: Neural Urban Semantic …

【BQ3568HM开发板】如何在OpenHarmony上通过校园网的上网认证

引言 前面已经对BQ3568HM开发板进行了初步测试&#xff0c;后面我要实现MQTT的工作&#xff0c;但是遇到一个问题&#xff0c;就是开发板无法通过校园网的认证操作。未认证的话会&#xff0c;学校使用的深澜软件系统会屏蔽所有除了认证用的流量。好在我们学校使用的认证系统和…

(Java版本)基于JAVA的网络通讯系统设计与实现-毕业设计

源码 论文 下载地址&#xff1a; ​​​​c​​​​​​c基于JAVA的网络通讯系统设计与实现(源码系统论文&#xff09;https://download.csdn.net/download/weixin_39682092/90299782https://download.csdn.net/download/weixin_39682092/90299782 第1章 绪论 1.1 课题选择的…