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)
      }
    }

下面就是效果图了

一个很新的手

相关推荐
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓4 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js