aliyun-weboffice (Vue 3)

WebOffice (阿里云 IMM WebOffice) 的 Vue3 + TypeScript 组件封装。

安装

• pnpm add easy-aliyun-weboffice
• npm i easy-aliyun-weboffice

使用

<template>
  <div class="container">
    <div class="header">
      <el-button @click="opendoc(1)">文档1</el-button>
      <el-button @click="opendoc(2)">文档2</el-button>
    </div>
    <webOffice
      ref="webofficeRef"
      :document="currentDocument"
      :document-request-options="documentRequestOptions"
      :web-office-options="webofficeOptions"
    >
      <template #loading>
        <el-skeleton animated style="width: 100%; height: 100%" />
      </template>

      <template #error="{ msg }">
        <el-empty description="加载失败">
          <div>{{ msg }}</div>
        </el-empty>
      </template>
    </webOffice>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { ElButton, ElSkeleton, ElEmpty } from 'element-plus'
import webOffice, { type DocumentRequestOptions, type WebOfficeOptions, type DocumentInfo } from 'easy-aliyun-weboffice'

// 定义组件引用的类型
const webofficeRef = ref<InstanceType<typeof webOffice>>()

// 准备文档
const documents = [
  {
    fileName: '文档1.doc',
    permission: {
      print: true,
      export: true,
      readonly: false
    }
  },
  {
    fileName: '文档2.pdf',
    permission: {
      print: true,
      export: true,
      readonly: true
    }
  }
]

const currentDocument = ref<DocumentInfo>(documents[0] as DocumentInfo)

const opendoc = (fileIndex: number) => {
  currentDocument.value = documents[fileIndex - 1] as DocumentInfo
}

// 配置文档请求选项
const documentRequestOptions = {
  // 配置获取文档Token的接口地址
  getWebofficeDocumentTokenURL: 'https://localhost:7039/getToken',
  // 配置刷新文档Token的接口地址
  refeshWebofficeDocumentTokenURL: 'https://localhost:7039/refeshToken',
  // getWebofficeDocumentTokenFunc:()=>{}, 自定义获取文档Token的方法
  // refeshWebofficeDocumentTokenFunc:()=>{},自定义刷新文档Token的方法
  user: { id: '12345', name: '测试用户' } // 当前用户信息
} as DocumentRequestOptions

// 配置webOffice组件选项
const webofficeOptions = {
  mode: 'normal', // normal-普通模式，simple-简洁模式
  cooperUserAttribute: {
    isCooperUsersAvatarVisible: true // 显示协作用户头像
  },
  // 通用选项
  commonOptions: {
    isShowTopArea: true, // 显示顶部区域
    isShowHeader: true, // 显示头部
    isBrowserViewFullscreen: true, // 是否允许在浏览器全屏模式
    isIframeViewFullscreen: true // 是否在iframe区域内全屏
  },
  // word文档选项
  wordOptions: {
    isShowDocMap: true, // 是否开启目录功能
    isBestScale: false, // 打开文档时，默认以最佳比例显示。
    isShowBottomStatusBar: true // 是否显示底部状态栏
  }
} as WebOfficeOptions

// watch(() => webofficeRef.value?.ins, (ins) => {
//   console.log('webofficeRef',ins);
//   ins?.ApiEvent.AddApiEventListener('fileOpen',(file)=>{
//     console.log('文件打开了',file);
//   })
//   ins?.ApiEvent.AddApiEventListener('fileStatus',(status)=>{
//     console.log('文件保存状态：',status);
//   })

// })

onMounted(async () => {
  // 等待组件实例初始化完成，获取实例对象（如果切换文档此方式无法获取新实例，可以使用上面watch）
  const ins = await webofficeRef.value?.ready()

  // 注册事件：
  // 不推荐此方式注册事件，切换文档后ins会变化，建议使用组件提供的WebOfficeEvents prop注册事件,或者使用上面watch监听ins变化后再注册事件
  ins?.ApiEvent.AddApiEventListener('fileOpen', (file) => {
    console.log('文件打开了', file)
  })
  ins?.ApiEvent.AddApiEventListener('fileStatus', (status) => {
    console.log('文件保存状态：', status)
  })

  // setInterval(() => {
  //   var res= ins?.save() // 手动调用save，模拟定时自动保存
  // }, 60000);

  // await ins?.ready() // 文档编辑器就绪，用于下面的高级api调用

  // const app = ins?.Application; // 获取文档应用对象

  //获取页面定制对象：更多菜单
  // const moreMenus = await app.CommandBars('MoreMenus');

  //控制更多菜单隐藏
  // moreMenus.Visible = false;
})
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.header {
  margin-bottom: 20px;
}
</style>