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.pswp.cn/web/66902.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/66902.shtml
英文地址,請注明出處:http://en.pswp.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 課題選擇的…