<template>
  <div class="docx-preview">
    <div
        ref="docxDiv"
        class="docxDiv"
        v-loading="loading"
    ></div>
  </div>
</template>

<script setup lang="jsx">
import {renderAsync} from "docx-preview";
import axios from "axios";

let docx = import.meta.glob("docx-preview"); // vite不支持require

const props = defineProps({
  fileUrl: {
    type: String,
    default: ''
  }
})

const loading = ref(false);

const previewFile = () => {
  loading.value = true;
  axios.request({
    url: props.fileUrl,
    method: 'get',
    responseType: 'blob'
  }).then((response) => {
    let docData = response.data;
    let docxDiv = document.getElementsByClassName("docxDiv");
    renderAsync(docData, docxDiv[0], null, {
      inWrapper: true, // 启用围绕文档内容渲染包装器
      ignoreWidth: false, // 禁止页面渲染宽度
      ignoreHeight: false, // 禁止页面渲染高度
      ignoreFonts: false, // 禁止字体渲染
      breakPages: true, // 在分页符上启用分页
      ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页
      experimental: false, //启用实验性功能（制表符停止计算）
      trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除
      debug: false,
    }).then((res) => {
      loading.value = false;
    });
  }).catch((error) => {
  });
};

previewFile()

</script>
<style lang="scss">
.docx-preview {
  overflow: auto;
  height: 650px !important;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  // 滚动条轨道
  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  // 小滑块
  &::-webkit-scrollbar-thumb {
    background: rgba(80, 81, 82, 0.29);
    border-radius: 10px;
  }
  .docx-wrapper > section.docx {
    margin-bottom: 0 !important;
  }

  .docx-wrapper {
    padding: 10px !important;

    .docx {
      width: 100% !important;
      min-height: 100vh !important;
      overflow: auto !important;
      //padding: 70pt 20pt 0 20pt !important;

      table {
        width: 100% !important;
      }

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      // 滚动条轨道
      &::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
      }

      // 小滑块
      &::-webkit-scrollbar-thumb {
        background: rgba(80, 81, 82, 0.29);
        border-radius: 10px;
      }
    }
  }
}
</style>

