vue3+elementplus实现预览upload上传的文件（目前只做了.pdf,.md,.docx）

我是将预览内容显示在对话框中的，word文件预览需要安装一个库

这是命令：pnpm install vueofficedocx

      <el-dialog v-model="dialogTwoVisible" title="文件预览" width="800" align-center fullscreen>
        <!-- docx -->
        <vue-office-docx v-if="fileType == 'docx'" :src="src" />
        <!-- pdf/text -->
        <iframe
          v-if="['pdf', 'text'].includes(fileType)"
          :src="src"
          width="100%"
          id="bdIframe"
        ></iframe>
        <!-- md -->
        <div v-if="fileType == 'md'" :src="src" id="markdown-preview" v-html="html"></div>
      </el-dialog>

下面是文件上传成功的回调函数 :on-success="submitFormSuccess"

        const html = ref()
        const src = ref('')
      /** 文件上传成功处理 */
        const submitFormSuccess = (response: any, uploadFile) => {
          // response是上传成功后的返回值，uploadFile就是你上传的文件
          fileType.value = uploadFile.name.split('.')[1]
          //word和pdf用的这个
          if (fileType.value !== 'md') {
            src.value = URL.createObjectURL(uploadFile.raw)
          } else {
            //将文件内容读入内存
            const reader = new FileReader()
            //读取完成后触发
            reader.onload = () => {
              const markdownText = reader.result
              const md = new MarkdownIt()
              html.value = md.render(markdownText)
            }
            //异步按字符读取文件内容，结果用字符串形式表示
            reader.readAsText(uploadFile.raw)
          }
        }

pdf有点问题，要改样式，网上搜说是因为触发事件的时候 dialogI弹框里面拿不到 id为bdIframe的组件

      const onPreview = () => {
      dialogTwoVisible.value = true
      if (fileType.value === 'pdf') {
        setTimeout(function () {
          /**
           * iframe-宽高自适应显示
           */
          const oIframe = document.getElementById('bdIframe')
          const deviceHeight = document.documentElement.clientHeight
          // oIframe.style.width = Number(deviceWidth) - 220 + "px"; //数字是页面布局宽度差值
          oIframe!.style.height = Number(deviceHeight) - 110 + 'px' //数字是页面布局高度差
        }, 500)
      }
    }

下面就是效果图了

一个很新的手