前端利用WPS WebOffice 做在线文档预览与编辑

先附上官网 WebOffice SDK
1、在下面这个地方找到jdk，然后下载
按照

2、只须要把jdk下载下来，放到项目中，然后引入到项目中就可以了，在wps 官网创建个应用，然后把appId放到代码中就可以了，等待后端把回调搞完，剩下的都是交给后端就可以了，接口报500，或者403都是后端搞，编辑权限和可读权限也是后端搞的
3、全部代码

1. <template>
2.   <div id="wps" ref="iframe"></div>
3. </template>
5. <script>
6. let WebOfficeSDK = require("@/utils/web-office-sdk-solution-v2.0.7.cjs.js");
7. export default {
8.   name: "tptOffice",
9.   data() {
10.     return {
11.     };
12.   },
13.   watch: {
14.     $route: {
15.       handler(to, from) {
16.         if (to.query.id != undefined) {
17.           this.init(to.query.id, to.query.officeType);
18.         }
19.         if (from?.path == "/tpt/office") {
20.           this.instance.destroy();  //wps自身的销毁
21.           //因为离开的时候外层的标签还在，所以加了这个获取类名删除
22.           const containers = document.getElementsByClassName(
23.             "web-office-default-container"
24.           );
25.           Array.from(containers).forEach((container) => {
26.             container.parentNode?.removeChild(container);
27.           });
28.         }
29.       },
30.       immediate: true,
31.     },
32.   },
33.   methods: {
34.     async init(fileId) {
35.       const ele = document.getElementById("wps");
36.       this.instance = await WebOfficeSDK.init({
37.         officeType: 'w',    // 文件类型
38.         appId: "XXXXXXXXXXXXXXXX",
39.         fileId: fileId,
40.         mount: ele,
41.         mode: "normal",
42.         token: "",
43.       });
44.     },
45.   },
46. };
47. </script>
49. <style lang="scss">
51. </style>

复制代码

4、在运行中发现有点问题，如果是在页面中套用的话，会占满全屏，左侧有菜单的话，会有遮挡，没有找到好的方法，

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