vue使用docx-preview实现docx文件在线预览功能全过程

npm i docx-preview --save
or
yarn add docx-preview

import { renderAsync } from 'docx-preview';
 
//一般用这种形式就行了
let docx = requie('docx-preview');
 
//我是vue3项目 报错require不行 就用的下边这种了
let docx = import.meta.glob('docx-preview');

<div ref="childRef" class="childRef"></div>

function previewfile(item) {
 
  if (item.fileType == '.docx') {
    nextTick(() => {
      fetch(item.filePath)
        .then((response) => {
          let docData = response.blob(); //将文件转换成bolb形式
 
           //选择要渲染的元素
          let childRef = document.getElementsByClassName('childRef');
 
           //用docx-preview渲染
          renderAsync(docData, childRef[0]).then((res) => {
            console.log('res---->', res);
          });
        })
        .catch((error) => {
          console.log(error);
        });
    });
  } else {
    ImageUrl.value = toRaw(item).filePath;
  }
}

<el-dialog v-model="dialogVisible" class="dialogLarge" append-to-body :destroy-on-close="true">
    //此处是弹窗名称
      <template #header>
        <div class="dialogHeader">
          <div>预览</div>
        </div>
      </template>
    //此处是预览图片的Img组件
      <img
        w-full
        :src="dialogImageUrl"
        alt="Preview Image"
        style="height: auto; width: 100%"
        v-show="dialogImageUrl"
      />
    //此处是用于渲染docx文档的div
      <div ref="childRef" class="childRef"></div>
</el-dialog>

//vue3使用:deep(){}的形式进行样式穿透
//vue2是::v-deep或者/deep/的形式进行样式穿透
 
:deep(.docx-wrapper) {
  background-color: #fff;
  padding: 0;
}
:deep(.docx-wrapper > section.docx) {
  width: 100% !important;
  padding: 0rem !important;
  min-height: auto !important;
  box-shadow: none;
  margin-bottom: 0;
}