项目开发中有使用到pageoffice,官网给的demo都是用jquery去做的,打开pageoffice 编辑保存后 需要刷新父页面拿到回调信息,因为vue是单页面应用,点击保存刷新父页面只能在index.html 在定义的路由文件里使用拿不到回调
思路:在index.html中拿到回调,绑定自定义事件
1.第一步引入pageoffice.js
<script type="text/javascript" src="http://xxxxxx.com/pageoffice.js"></script>
2 在index.html文件中准备好后回调函数,注册自定义事件
//父页面刷新页面的函数
function refresh(customSaveResult) {
// 注册自定义事件
let event = document.createEvent("HTMLEvents");
event.initEvent("initPageOfficeEvent", false, true);
event.eventType = customSaveResult
window.dispatchEvent(event);
}```
3.在使用的路由文件里 监听自定义的事件
<template>
<div>
<el-button :type="btnType" @click="uploadFile">打开pageoffice</el-button>
</div>
</template>
created() {
window.addEventListener('initPageOfficeEvent', (e) => {
this.getPageOfficeOssUrl(e)
})
},
methods: {
uploadFile() {
cosnt pageOfficeServer ='http://xxxx.com/' //pageoffice服务
// eslint-disable-next-line no-undef
POBrowser.openWindowModeless(pageOfficeServer + `/word?url=${this.fileUrl}`, `width=${this.width};height=${this.height};`)
},
getPageOfficeOssUrl(e) {
const { eventType } = e
console.log(eventType, 'eventType')
this.$emit('input', eventType)
}
}