项目开发中有使用到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)
    }
  }


Logo

前往低代码交流专区

更多推荐