Vue 3 使用 WPS Web Office

新建一个容器
 <div ref="weboffice"></div>

引入Web office的JSSDK
JS SDK 点击下载
import WebOfficeSDK from '@/assets/web-office-sdk-solution-v2.0.6.es.js'

 

  import { ref } from 'vue'

  import { useRoute } from 'vue-router' 

import WebOfficeSDK from '@/assets/web-office-sdk-solution-v2.0.6.es.js'//引入JSSDK

const weboffice = ref(null) 
const instance = ref() 
instance.value = await WebOfficeSDK.init({
  officeType: 's',  //s是xlsx表格,w是word文档,p时ppt,f是pdf
  appId: '管后端要', //AppID 
  fileId: route.query.id, //文件id 找后端要
  mount: weboffice.value, //容器 
  isManual: true,
  isListenResize: true, //默认跟随浏览器大小
  Cooperation: false,
  // mode: 'simple', //简洁模式 没有菜单
  token: localStorage.getItem('token'), //登录时的token
  commonOptions: {
    isShowTopArea: true, // 隐藏顶部区域（头部和工具栏）
    isShowHeader: true, // 隐藏头部区域
    isBrowserViewFullscreen: false, // 是否在浏览器区域全屏true 不允许全屏
    isIframeViewFullscreen: false, // 是否在 iframe 区域内全屏true 不允许全屏
    acceptVisualViewportResizeEvent: false // 控制 WebOffice 是否接受外部的 VisualViewport
  }
})

这样就可以打开了