根据element改造的文件预览组件：支持图片、doc、xlsx、ppt、PDF、视频等文件预览

最新推荐文章于 2024-05-16 13:27:42 发布
最新推荐文章于 2024-05-16 13:27:42 发布
阅读量2.7k 收藏 14
点赞数 3
分类专栏： vue  Element vue功能 文章标签： javascript vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldoit/article/details/120525653
版权

element-ui框架的预览只能预览图片，其他文件不支持，不支持就自己封装一个吧，前提条件后端返回的文件预览支持访问

首先在component中新建文件：FilePreview.vue:内容如下

<template>
  <!-- 预览组件 -->
  <div class="FilePreview">
    <div class="container">
      <!-- 渲染层 -->
      <div class="object" v-if="TragetObj.format == 'jpg' || TragetObj.format == 'png' || TragetObj.format == 'JPG' || TragetObj.format == 'PNG' || TragetObj.format == 'jpeg'|| TragetObj.format == 'tiff'|| TragetObj.format == 'swf'|| TragetObj.format == 'gif'|| TragetObj.format == 'JPEG'|| TragetObj.format == 'GIF'"
        ref="imgWrap" @mousewheel.prevent="rollImg">   
          <img class="Target modal-img" ref="img" @mousedown="moveImg" :src="TragetObj.url" alt="" >
      </div>
      <!-- 视频 -->
      <div class="object" v-else-if="TragetObj.format == 'webm' || TragetObj.format == 'mov' || TragetObj.format == 'mp4'">
        <video class="Target" controls="controls" width="1200" height="700" :src="TragetObj.url" autoplay ref="videoref" >
          您的浏览器不支持。
        </video>
      </div>
      <!-- 附件 -->
      <div class="object" v-else>
        <iframe class="Target" frameborder="1" index-render="1" scrolling="yes" height="890.15" width="1220.4" :src="TragetObj.url"></iframe>
      </div>
      <!-- 操作按钮 -->
      <div class="viewer_btn">
        <ul>
          <li @click="onClickEnlarge">
            <i class="el-icon-zoom-in"></i>
          </li>
          <li @click="onClickNarrow">
            <i class="el-icon-zoom-out"></i>
          </li>
          <li @click="onClickReturnOriginal">
            <i class="el-icon-c-scale-to-original"></i>
          </li>
          <!-- 下载 -->
          <li v-if="TragetObj.downUrl">
            <a :href="TragetObj.downUrl">
              <i class="el-icon-download"></i>
            </a>
          </li>
            <!-- <li>
              <i class="el-icon-full-screen"></i>
          </li> -->
        </ul>
      </div>
      <!--下一个 -->
      <div class="next" v-if="NumIndex < this.FilePresAll.length - 1"  @click="onClickNext">
        <i class="el-icon-arrow-right"></i>
      </div>
      <!-- 上一个 -->
      <div class="previous" v-if="NumIndex != 0" @click="onCLickPrevious">
        <i class="el-icon-arrow-left"></i>
      </div>
      <!-- 关闭按钮 -->
      <div class="close" @click="onClickClose">
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="viewer__mask" @click.stop="onClickClose">
      <div  v-loading="loadingFlag"></div>
    </div>
  </div>
</template>

<script>
export default {
    props:['TragetPic', 'FilePreAll'],
    data(){
      return{
        EleWidth:"",
        EleHeight:"", 
        TragetObj:{}, // 目标对象
        FilePresAll:[], // 渲染数组
        NumIndex:0, // 当前渲染目标的下标
        loadingFlag:false, // 加载
      }
    },
    created(){
      this.TragetObj = this.TragetPic // 目标对象
      this.FilePresAll = this.FilePreAll // 渲染数组
    },
    mounted () {
      if(this.EleWidth == ""){
        if(this.TragetObj.format != 'jpg' && this.TragetObj.format != 'png' && this.TragetObj.format != 'JPG' && this.TragetObj.format != 'PNG' && this.TragetObj.format != 'jpeg' && this.TragetObj.format != 'tiff' && this.TragetObj.format != 'swf' && this.TragetObj.format != 'gif' && this.TragetObj.format != 'JPEG' && this.TragetObj.format != 'GIF'){
          this.loadingFlag = true
        }else{
          this.loadingFlag = false
        }
      }
      // 获取目标元素值
      let  Target = document.getElementsByClassName("Target")[0];
      this.EleWidth = Target.offsetWidth
      this.EleHeight = Target.offsetHeight
      if(this.EleWidth != ""){
        this.loadingFlag = false
      }
      // console.log(this.EleWidth)

      // 获取当前目标的下标值
      this.FilePresAll.forEach((item, index)=>{
        if(item.FileName == this.TragetObj.FileName){
          this.NumIndex = index
        }
      })
    },

    beforeUpdate () {
      if(this.TragetObj.format != 'jpg' && this.TragetObj.format != 'png' && this.TragetObj.format != 'JPG' && this.TragetObj.format != 'PNG' && this.TragetObj.format != 'jpeg' && this.TragetObj.format != 'tiff' && this.TragetObj.format != 'swf' && this.TragetObj.format != 'gif' && this.TragetObj.format != 'JPEG' && this.TragetObj.format != 'GIF'){
        this.loadingFlag = true
      }else{
        this.loadingFlag = false
      }
      this.$nextTick(()=>{
        let eleParent = document.querySelector('.object')
        // 获取目标元素值
        let Target = eleParent.children[0]
        this.EleWidth = Target.offsetWidth
        this.EleHeight = Target.offsetHeight
        // console.log(Target)
          
      })
    },
    methods:{
      // 放大功能
      onClickEnlarge(){
        let Target=document.getElementsByClassName("Target")[0];
        Target.style.height=Target.height*1.1+'px';
        Target.style.width=Target.width*1.1+'px';
      },

      // 缩小功能
      onClickNarrow(){
        let Target=document.getElementsByClassName("Target")[0];
        Target.style.height=Target.height/1.1+'px';
        Target.style.width=Target.width/1.1+'px';
      },

      // 返回原图大小
      onClickReturnOriginal(){
        let Target=document.getElementsByClassName("Target")[0];
        Target.style.height=this.EleHeight+'px';
        Target.style.width=this.EleWidth +'px';
      },

      // 点击下一个事件
      onClickNext(){
        if(this.NumIndex < this.FilePresAll.length - 1){
          this.NumIndex++
          this.TragetObj = this.FilePresAll[this.NumIndex]
        }
      },

      // 点击上一个事件
      onCLickPrevious(){
        if(this.NumIndex != 0){
          this.NumIndex--
          this.TragetObj = this.FilePresAll[this.NumIndex]
        }
      },

      // 关闭按钮
      onClickClose(){
        // 关闭视频声音
        if(this.$refs.videoref != undefined){
          this.$refs.videoref.pause()
        }
        this.$emit('Close', false)
      },

      // 拖拽图片事件
      moveImg (e) {
        e.preventDefault()
        // 获取元素
        let imgWrap = this.$refs.imgWrap
        let img = this.$refs.img
        let x = e.pageX - img.offsetLeft
        let y = e.pageY - img.offsetTop
        // 添加鼠标移动事件
        imgWrap.addEventListener('mousemove', move)
        function move (e) {
          img.style.left = e.pageX - x + 'px'
          img.style.top = e.pageY - y + 'px'
        }
        // 添加鼠标抬起事件，鼠标抬起，将事件移除
        img.addEventListener('mouseup', () => {
          imgWrap.removeEventListener('mousemove', move)
        })
        // 鼠标离开父级元素，把事件移除
        imgWrap.addEventListener('mouseout', () => {
          imgWrap.removeEventListener('mousemove', move)
        })
      },

      // 鼠标滚动缩放图片事件
      rollImg (event) {
        /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */
        let zoom = parseInt(this.$refs.img.style.zoom) || 100
        /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */
        zoom += event.wheelDelta / 12
        /* 最小范围 和 最大范围 的图片缩放尺度 */
        if (zoom >= 40 && zoom < 500) {
            this.$refs.img.style.zoom = zoom + '%'
        }
        return false
      },
    }
}
</script>

<style lang="scss" scoped>
.FilePreview{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8888;
  height: 100%;
  width: 100%;
  .container{
    display: flex;
    flex-direction: column;
    align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/
    justify-content: center;/*由于flex-direction: column，因此justify-content代表的是垂直方向*/
    position: relative;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    .object{
      z-index: 10001;
      display: flex;
      flex-direction: column;
      align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/
      justify-content: center;/*由于flex-direction: column，因此justify-content代表的是垂直方向*/
      margin: 25px;
      .modal-img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          max-width: 100%;
          cursor: move;
          &-wrap {
          position: relative;
          width: 960px;
          height: 560px;
          overflow: hidden;
        }
      }
    }
    .viewer_btn{
      position: absolute;
      left: 50%;
      bottom: 20px;
      z-index: 10020;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      // width: 250px;
      height: 44px;
      padding: 0 23px;
      background-color: #606266;
      border-color: #fff;
      border-radius: 22px;
      ul{
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li{
          font-size: 30px;
          color: #fff;
          padding: 6px 10px;
          cursor: pointer;
        }
      }
    }
    .next{
      position: absolute;
      top: 50%;
      right: 15px;
      z-index: 10020;
      font-size: 30px; 
      height: 44px;
      width: 44px;
      line-height: 44px;
      text-align: center;
      background: #606266;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }
    .previous{
      position: absolute;
      top: 50%;
      left: 15px;
      z-index: 10020;
      font-size: 30px;
      height: 44px;
      width: 44px;
      line-height: 44px;
      text-align: center;
      background: #606266;
      color: #fff;
      border-radius: 50%;
      cursor: pointer; 
    }
    .close{
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 10020;
      font-size: 30px;
      cursor: pointer;
      background: #606266;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
  }
  .viewer__mask{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    top: 0;
    left: 0;
    z-index: 8888;
    display: flex;
    flex-direction: column;
    align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/
    justify-content: center;/*由于flex-direction: column，因此justify-content代表的是垂直方向*/
  }
}
</style>
<style>
/* 关闭图标 */
.FilePreview .el-icon-close{   
  color: #fff;
}
</style>

在需要使用的页面引入组件：

import FilePreview from '@/pageCommon/FilePreview.vue' // 预览组件；
components: {
    FilePreview,
  },
  data(){
  	return{
  		// 预览数据
      IsPreview:false, // 控制预览弹窗字段
      timers:"", //时间戳
      FilePreAll:[], // 预览数组
      TragetPic:{}, // 当前点击的预览文件对象
  	}
  },
methods: {
	// 打开预览
    onClickOpenPreview(val){
      this.TragetPic  = { // 当前点击的文件
        FileName: val.name, // 文件名称
        name: val.name, // 文件名称（可以不传）
        id:val.guid_name, // 文件id
        format:val.extensions, // 文件格式
        url: this.previewFile + val.guid_name,  // 预览地址
        downUrl:"", // 下载地址
      } // 目标对象

      this.tableData.forEach(item =>{ // 需要预览的文件数组（可以传空数组就是单张预览）
        let obj = {
          FileName: item.name,
          name: item.name,
          id:item.guid_name,
          format:item.extensions,
          url: this.previewFile + item.guid_name,
          downUrl:"",
        }
        this.FilePreAll.push(obj)
      })

     
      this.IsPreview = true // 打开预览弹窗
      this.timers = new Date().getTime() // 刷新预览地址
    },
	// 关闭预览
    onClickClosePreview(val){
      this.IsPreview = val  // 由组件内部传入的关闭数据赋值关闭
    },
｝

在template中使用：

<!-- 预览 -->
    <div class="preview" v-if="IsPreview">
      <file-preview :key="timers" :TragetPic="TragetPic" :FilePreAll="FilePreAll" @Close="onClickClosePreview"></file-preview>
    </div>

最后看效果图：
图片预览：
在这里插入图片描述
文件预览：
在这里插入图片描述
在这里插入图片描述

虽然封装的不是很好，文件预览主要是使用了iframe，同时还支持视频的预览，先将就用着，后续再进行更好的优化，更简易化的使用，目前还是有些复杂。不懂的可以评论咨询哈，谢谢支持；

抠脚小弟
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
【第014篇】基于vue+elementui设计的在线预览文件（可预览图片、音频、视频、PDF、WORD、EXCEL文档）
嘉&年华的博客
08-05 3129
vue+element，组件封装，预览文件。最后示例代码，文件上传支持文件图标缩略图，代码中如果是PDF文件，则回显PDF图标文件，如果是DOC文件，则回显DOC图标文件。
Vue实现文件预览，支持word excel pdf ppt image txt mp4等格式
10-14
Vue 实现前端文件预览，支持word excel pdf ppt image txt json mp4 等格式，集成到Vue项目中，已组件的方式引入即可，可是实现多种文件格式预览
vue-office+element-ui 预览docx、xlsx、pdf文件
qq_33240556的博客
04-23 562
的最新文档以获得准确的 API 使用方法，因为随着时间推移，插件可能会有更新或变动。同时，对于 PDF 预览，如果。如果是从后端接口获取文件流，你需要先调用接口获取到文件数据，并转换成合适的格式传给预览组件。这个插件来处理不同格式文档的预览功能。Vue.js 和 Element UI 结合时，要实现。不支持或者有特殊需求，还可以考虑使用其他成熟的库如。文件的在线预览，可以借助。
element-plus图片预览
weixin_57092157的博客
05-18 3084
项目中需要对图片进行放大预览操作；使用 el-image 自带的预览功能；②使用 el-image-preview 组件进行预览；
vue实战--vue+elementUI实现多文件上传+预览（word PDF 图片 docx doc xlxs txt）_elementui pdf 上传后预览(1)
最新发布
2401_84447297的博客
05-16 417
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HTML部分//on-preview="Previewf"是必须的也是预览的关键上传文件
element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件（浏览器打开文件的方式）
浮萍的博客
06-22 1万+
此组件就是一个单纯的预览图片、浏览器打开文件的形式简单的组合了下而成的，word、excel是直接下载、pdf浏览器打开的形式，如果想本地打开直接预览的话就直接不用看了。word、excel、pdf 的图片是我放到服务器上的图片地址。......
vue+ElementUI实现点击图片预览大图和预览视频
yh0016的博客
03-05 1万+
Vue+ElementUI实现在表格中点击图片预览大图和预览视频
vue配合element 实现在线预览pdf文档
weixin_55876727的博客
03-31 3138
使用插件 npm install --save vue-pdf <template> <div id="app"> <el-button type="text" @click="dialogVisible = true" >点击打开 Dialog</el-button > <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件 预览
04-06
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件转Blob流 预览。实现前端选择文件 直接在页面展示，或者请求后端获取base64 string 字符串 转码 在前端页面展示
OpenOffice：实现在线预览，word文档 doc、xlsx、pdf、txt等
03-29
OpenOffice安装说明： 1.软件说明：实现在线预览，word文档 doc、xlsx、pdf、txt等 2.安装OpenOffice：一直下一步即可，默认安装地址：C:\Program Files (x86)\OpenOffice 4
前端实现文件预览，pdf、xls、xlsx、docx
12-05
非原创。使用方式也很简单：<iframe :src=`./pdfjs/viewer.html?file=${encodeURIComponent('url')}`/>注：/pdfjs/viewer.html，为js文件包根目录的viewer。url：后面的为需要预览的文件url。
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
04-21
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本） 前言 ===== 在前端开发中，预览文件是一项非常重要的功能，很多业务场景下都需要实现文件预览。今天，我们将介绍如何实现文件预览，包括word、excel...
vue实现预览PDF、Excel、Docx、Txt、PPT文件的功能
rhcjqmm666的博客
09-04 1694
假设有这些变量：attachment是附件的意思。
element中图片和文件的预览功能
qq_34652478的博客
12-13 6247
按照需求在做一个图片和文件预览的功能。 因为后台返回的是二进制文件，所以根本不能直接打开。 第一步，针对图片的预览，我使用了el-image-viewer 组件。 1.后台请求的方法 download: params => { return axios.get('/contentmanagement/file/download?id='+params.id,{ re...
Vue - element-ui 中预览 word 、exce、ppt以及pdf文件
热门推荐
碌碌无为的程序猿
08-17 11万+
最近写了个有 预览word 、Exce、ppt以及pdf文件 的后台 管理 在网上也找了 很多 就感觉很复杂 ，当然最后还是实现了 ， 本博主一项喜欢简单 越简单越好 越好理解 废话不多说 先上效果图 （我就喜欢那种有图的代码 能预览一下是不是自己想要的效果） 1.显示页面 2，预览效果 word 2.exce 3.ppt 没有 但是都一样 4.pdf 1. 首先说 预览 word...
结合el-upload修改支持上传图片、视频并预览
一个韩韩韩
12-26 1806
结合element plus的el-upload标签，实现上传图片和视频，并支持在线预览和放大。
vue实战--vue+elementUI实现多文件上传+预览（word/PDF/图片/docx/doc/xlxs/txt）
m0_62209297的博客
06-10 2万+
多文件上传预览、PDF预览、word预览、图片预览、xlxs预览、doc预览、docx预览
利用vue 及java io流实现浏览器预览docx功能
qq_41611829的博客
06-29 1586
页面预览文档
vue+element-ui实现上传及预览文件
weixin_48787059的博客
02-09 1万+
目录标题前言上传文件实现代码预览文件实现代码 前言 上篇文章分享了微信小程序上传及预览文件的方法，本篇文章来分享一下vue+element实现上传及预览文件的方法,upload上传文件方法，是element-ui提供的方法，主要是利用其参数绑定方法进行上传操作，有想要深入了解的/博友，可到element-ui官网查看。window.open(url)可打开想要查看的文件，这些也是我最近搜索到的并且亲自实践过的,如果觉得有用，可上滑查看实现代码。 上传文件实现代码 <!-- show-file-l
vue 预览docx、doc、pdf、xls、xlsx文件
06-06
在Vue中预览docx、doc、pdf、xls、xlsx文件，可以使用第三方库来实现。 对于docx、doc、xls、xlsx文件，可以使用`js-xlsx`库来进行解析和预览。该库可以将Excel文件转换为JSON格式，而对于Word文件，可以使用`docx.js`库来进行解析和预览。 对于pdf文件，可以使用`pdf.js`库来进行预览。该库可以通过Canvas将PDF文件渲染成图片，然后在Vue中显示。 下面是一个示例代码，演示如何使用上述库来预览不同类型的文件： ```html <template> <div> <div v-if="fileType === 'docx' || fileType === 'doc'"> <div v-html="docContent"></div> </div> <div v-else-if="fileType === 'xls' || fileType === 'xlsx'"> <table> <tr v-for="row in excelData"> <td v-for="cell in row">{{ cell }}</td> </tr> </table> </div> <div v-else-if="fileType === 'pdf'"> <canvas ref="pdfCanvas"></canvas> </div> </div> </template> <script> import XLSX from 'xlsx'; import Docx from 'docx'; import pdfjsLib from 'pdfjs-dist'; export default { data() { return { fileType: '', docContent: '', excelData: [], }; }, mounted() { // 根据文件类型进行解析和预览 if (this.fileType === 'docx' || this.fileType === 'doc') { const reader = new FileReader(); reader.onload = (event) => { const content = event.target.result; const doc = new Docx(); doc.load(content); this.docContent = doc.getHtml(); }; reader.readAsArrayBuffer(this.file); } else if (this.fileType === 'xls' || this.fileType === 'xlsx') { const reader = new FileReader(); reader.onload = (event) => { const content = event.target.result; const workbook = XLSX.read(content, { type: 'array' }); const sheetName = workbook.SheetNames[0]; const worksheet = workbook.Sheets[sheetName]; this.excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); }; reader.readAsArrayBuffer(this.file); } else if (this.fileType === 'pdf') { const canvas = this.$refs.pdfCanvas; const ctx = canvas.getContext('2d'); pdfjsLib.getDocument(this.file).promise.then((pdf) => { pdf.getPage(1).then((page) => { const viewport = page.getViewport({ scale: 1.5 }); canvas.height = viewport.height; canvas.width = viewport.width; page.render({ canvasContext: ctx, viewport, }); }); }); } }, props: { file: { type: File, required: true, }, }, created() { // 根据文件后缀名判断文件类型 const fileExtension = this.file.name.split('.').pop(); if (fileExtension === 'docx' || fileExtension === 'doc') { this.fileType = 'docx'; } else if (fileExtension === 'xls' || fileExtension === 'xlsx') { this.fileType = 'xls'; } else if (fileExtension === 'pdf') { this.fileType = 'pdf'; } }, }; </script> ``` 在上述代码中，根据文件后缀名判断文件类型，然后使用不同的库进行解析和预览。对于Word文件，使用`docx.js`库将文件解析为HTML格式，然后在Vue中显示；对于Excel文件，使用`js-xlsx`库将文件解析为JSON格式，然后在Vue中生成表格；对于PDF文件，使用`pdf.js`库将文件渲染成图片，然后在Vue中显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值