smartai2dian0/src/modules/viewer-docx/ViewerDocxFromUrl.vue

<template>
  <div class="doc-container" ref="box"></div>
  <div class="loading-doc-box" v-if="load_status === 2">
    <div class="loading-spin">
      <a-spin :size="36" />
    </div>
  </div>

  <div class="loading-doc-box" v-if="load_status === 4">
    <a-result status="error" title="文档加载出错">
      <template #subtitle>
        {{ load_msg }}
      </template>
    </a-result>
  </div>
</template>

<script setup>
import { ref, useTemplateRef, onMounted } from 'vue';
import { renderDocxByBlob } from '../../3rd-libs/docx-preview';
import { url2Blob } from '../../utils/file-utils';

const props = defineProps({
  /**
   * doc的链接
   */
  url: String,

  /**
   * 文档容器的宽度
   */
  doc_width: Number
});

const box = useTemplateRef('box');

/**
 * 记录PDF文档加载过程中的状态
 * 1 默认值，未开始加载
 * 2 正在加载中
 * 3 加载成功
 * 4 加载出错
 */
const load_status = ref(1); // 1 默认值，未启动 2 加载中 3 成功 5 出错
const load_msg = ref(''); // 加载消息

onMounted(() => {
  load_status.value = 2; // 加载中
  load_msg.value = 'loading';

  url2Blob(props.url)
    .then((blob) => {
      renderDocxByBlob(box.value, blob)
        .then((res) => {
          // console.log(res);

          // 所有页面都加载完毕，结束加载状态
          load_status.value = 3; // 加载成功
          load_msg.value = 'success';
        })
        .catch((err) => {
          load_status.value = 4; // 加载出错
          load_msg.value = `文档 ${props.url} 加载出错。 ERROR: ：${err.message}`;
        });
    })
    .catch((err) => {
      load_status.value = 4; // 加载出错
      load_msg.value = `文档 ${props.url} 加载出错。 ERROR: ：${err.message}`;
    });
});
</script>

<style scoped>
.doc-container {
  text-align: center;
  /* height: 100vh; */
  height: 100%;
  overflow-y: auto;
}

.loading-doc-box {
  width: 100%;
  /* height: 100vh; */
  height: 100%;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}

.loading-spin {
  width: 40px;
  height: 40px;
}
</style>