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

下面就是效果图了

一个很新的手

相关推荐
T^T尚2 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志2 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3923 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
山猪打不过家猪3 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山3 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js
科技D人生3 小时前
Vue.js 学习总结(14)—— Vue3 为什么推荐使用 ref 而不是 reactive
前端·vue.js·vue ref·vue ref 响应式·vue reactive
对卦卦上心3 小时前
React-useEffect的使用
前端·javascript·react.js
练习两年半的工程师3 小时前
React的基本知识:事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
前端·javascript·react.js
啵咿傲3 小时前
在React中实践一些软件设计思想 ✅
前端·react.js·前端框架
GIS好难学3 小时前
《Vue零基础入门教程》第二课:搭建开发环境
前端·javascript·vue.js·ecmascript·gis·web