侧边栏显示

常见的插件显示和多文档协同场景中，需要将内容侧边栏展示。

参考实例

该实例主要实现了一个侧边栏显示的word文档，通过拖动侧边栏控件可灵活调节容器显示区域大小，文档内容会自适应调整。

实例中主要使用到以下API：

参考代码

<template>
  <div ref="webofficeEl" :style="{ left }" class="weboffice__wrapper"></div>
  <div ref="resizeEl" :style="{ left }" class="resize__control"></div>
  <div class="resize__overlay"></div>
</template>

<script lang="ts" setup>
import { watch, onMounted, ref, computed } from 'vue'
import { useDraggable } from '@vueuse/core'

let instance
const webofficeEl = ref<HTMLElement | null>(null)
const resizeEl = ref<HTMLElement | null>(null)

const { x } = useDraggable(resizeEl, {
  initialValue: { x: 1200, y: 0 },
  preventDefault: true,
  stopPropagation: true
})

const left = computed(() => {
  return x.value + 'px'
})

watch(x, () => {
  // 主动触发resize事件
  window.dispatchEvent(new Event('resize'))
  // 执行API，缩放视图以适应文档窗口的尺寸
  onFit()
})

onMounted(() => {
  import('../../../public/web-office-sdk-v1.1.19.es').then(WebOfficeSDK => {
    instance = WebOfficeSDK.config({
      url: 'https://kdocs.cn/l/cnCEyfNkt34D',
      mount: webofficeEl.value,
      mode: 'simple', // 极简模式，不显示头部和工具栏
      wordOptions: {
        isShowDocMap: false, // 是否开启目录功能，默认开启
        isBestScale: true // 打开文档时，默认以最佳比例显示
      }
    })
  })
})
async function onFit() {
  await instance.ready()

  const app = instance.Application

  // 对文档窗口大小进行调整后，是否缩放视图以适应文档窗口的尺寸
  app.ActiveDocument.ActiveWindow.View.Zoom.PageFit = 2
}
</script>

<style scoped>
.weboffice__wrapper {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  z-index: 999;
}
.resize__control:hover + .resize__overlay {
  display: block;
}
.resize__control:active + .resize__overlay {
  display: block;
}
.resize__control {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 10px;
  background-color: #d2d2d2;
  transition: background-color 0.2s;
  z-index: 1001;
}
.resize__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
}
.resize__control:hover,
.resize__control:active {
  background-color: #417ff9;
  cursor: w-resize;
}
</style>

侧边栏显示 #

参考实例 #

参考代码 #

侧边栏显示

参考实例

参考代码