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 //縮放視圖自適應文檔窗口的尺寸