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

1. //注意:这里一定要设置宽高，否则不会显示
2. <div id='wps' ref='wpsRef' style="width:600px;height:500px"></div>
3.        
4. const init = async ()=>{
5.         const ele = document.getElementById('wps')
6.     const instance = await webOfficeSDK.init({
7.       officeType: 'w',
8.       appId: 'xxxx',  
9.       fileId: '2',
10.       mount: ele,
11.       mode: 'simple',
12.       wordOptions: {
13.         isShowDocMap: false,  //是否开启目录功能
14.         isBestScale: true  //打开文档默认以最佳比例显示
15.       }
16.     })
17.     //注意：一定要等到ready完才做其他的操作 不然会出现模块未定义或找不到
18.     const ready = await this.instance.ready()
19.     if(ready){
20.       ...
21.       return ture
22.      }
23.      return false
24.    }
27. //初始化
28. onMounted(async()=>{
29.         const res = await init()
30.         if(res){
31.                 // 其他操作 例如 请求接口数据回显到下拉组件
32.         }
33. })

复制代码

2、修改wps的宽度样式
1）需求描述：与官方案例类似 ，但是需要添加一个收缩/展示按钮，当右侧表单收缩时，左侧的文档宽度应为100%，当右侧表单展示时，左侧文档恢复原样

2）实现思绪

• 左侧div设置固定的宽度和高度，例如80%，且div里面放挂载wps的div，右侧表单设置固定宽度和高度，例如20%，根据按钮的显示隐蔽动态设置其宽度
  

1. <div :style="flg?'width:80%':'width:100%'">
2.         <div id='wps' style="width:100%;height:100%"></div>
3. </div>
4. <div :style="flg?'width:20%':'width:0%'">
5.         <div id='wps'></div>
6. </div>

复制代码

注意：按钮控件可以控制外层div的宽度动态变化，无法控制wps的宽度变化，需要使用到实例对象值的iframe对象
   文档位置：https://solution.wps.cn/docs/web/instance.html
  

• 设置iframe
  

1. //上面初始化时有个ready状态
2. const iframe = ref(null)
4. if(ready){
5. iframe = await instance.iframe
6. return ture
7. }
8. //当按钮点击时(不管是收缩还是展开都设置为100%且文档自适应)
9. iframe.style.width = "100%"
10. //app 也是在ready后面获取 可参考官方文档
11. app.ActiveDocument.ActiveWindow.View.Zoom.Percentage = 100 //设置窗口缩放比例
12. app.ActiveDocument.ActiveWindow.View.Zoom.PageFit = 2  //缩放视图自适应文档窗口的尺寸

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。