前端利用WPS WebOffice 做在线文档预览与编辑
先附上官网 WebOffice SDK1、在下面这个地方找到jdk，然后下载
按照
https://i-blog.csdnimg.cn/direct/8d439c390bda45b99093103f36d8eb9f.png
2、只须要把jdk下载下来，放到项目中，然后引入到项目中就可以了，在wps 官网创建个应用，然后把appId放到代码中就可以了，等待后端把回调搞完，剩下的都是交给后端就可以了，接口报500，或者403都是后端搞，编辑权限和可读权限也是后端搞的
3、全部代码
<template>
<div id="wps" ref="iframe"></div>
</template>
<script>
let WebOfficeSDK = require("@/utils/web-office-sdk-solution-v2.0.7.cjs.js");
export default {
name: "tptOffice",
data() {
return {
};
},
watch: {
$route: {
handler(to, from) {
if (to.query.id != undefined) {
this.init(to.query.id, to.query.officeType);
}
if (from?.path == "/tpt/office") {
this.instance.destroy();//wps自身的销毁
//因为离开的时候外层的标签还在，所以加了这个获取类名删除
const containers = document.getElementsByClassName(
"web-office-default-container"
);
Array.from(containers).forEach((container) => {
container.parentNode?.removeChild(container);
});
}
},
immediate: true,
},
},
methods: {
async init(fileId) {
const ele = document.getElementById("wps");
this.instance = await WebOfficeSDK.init({
officeType: 'w', // 文件类型
appId: "XXXXXXXXXXXXXXXX",
fileId: fileId,
mount: ele,
mode: "normal",
token: "",
});
},
},
};
</script>
<style lang="scss">
</style>
4、在运行中发现有点问题，如果是在页面中套用的话，会占满全屏，左侧有菜单的话，会有遮挡，没有找到好的方法，
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]