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

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

这是命令:pnpm install vueofficedocx

xml 复制代码
      <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"

scss 复制代码
        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的组件

ini 复制代码
      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)
      }
    }

下面就是效果图了

一个很新的手

相关推荐
嘻嘻嘻嘻嘻嘻ys2 分钟前
《Spring Boot 3响应式架构实战:R2DBC驱动的高并发数据持久化革命》
前端·后端
滚石_stars2 分钟前
了解 CSS 的 display: inline-flex;
前端
程序员Bears2 分钟前
HTML5 新特性详解:语义化标签、表单与音视频嵌入
前端·html·html5·visual studio code
进取星辰2 分钟前
14、服务端组件:未来魔法预览——React 19 RSC实践
前端·react.js·前端框架
剽悍一小兔8 分钟前
小程序发布后,不能强更的情况下,怎么通知到用户需要去更新?
前端
115432031q8 分钟前
基于SpringBoot+Vue实现的旅游景点预约平台功能十三
java·前端·后端
JiangJiang9 分钟前
🧠 面试官:受控组件都分不清?还敢说自己写过 React?
前端·react.js·面试
tianchang9 分钟前
JS 中 Map 的概念与使用
前端·javascript
Jenlybein10 分钟前
[ Javascript 面试题 ]:提取对应的信息,并给其赋予一个颜色,保持幂等性
前端·javascript·面试
Carlos_sam10 分钟前
Opnelayers:向某个方向平移指定的距离
前端·javascript