Vue移动端实现pdf/excel/图片在线预览

 更新时间:2024年04月24日 11:24:51   作者:lory代码搬运工  
这篇文章主要为大家详细介绍了Vue移动端实现pdf/excel/图片在线预览功能的相关方法,文中的示例代码讲解详细,有需要的小伙伴可以参考下

vue移动端实现pdf、excel、图片在线预览

一、首先预览pdf

安装vue-pdf,预览excel安装xlsx,预览图片是用的vant

npm install --save vue-pdf 
npm install xlsx --save
npm install vant --save

二、父页面代码

<template>
   <button @click="seeFile">
   </button>
</template>
//引入子页面,也就是预览的界面
import Views from './previewFile'
export default {
  name: 'FileList',
  components: { Views },
  data() {
    return {
      url:'',//要预览的文件地址
      src: '', // 传参
      type: '', // 附件类型
    }
  },
  methods: {
      //item参数为文件地址
      seeFile(this.url) {
      //文件预览 
      if (item.fileName.toLowerCase().includes('jpg') || item.fileName.toLowerCase().includes('png')|| item.fileName.toLowerCase().includes('jpeg')) {
        this.src = fileAbsPath
        this.type = 'img'
      } else if (item.fileName.toLowerCase().includes('pdf')) {
        this.src = fileAbsPath
        this.type = 'pdf'
        this.$refs.vViews.pageNum = 1
      } else if (item.fileName.toLowerCase().includes('xls') || item.fileName.toLowerCase().includes('xlsx')) {
        this.src = fileAbsPath
        this.type = 'excel'
      }
      this.$nextTick(() => {
        this.$refs.Views.isShow = true
        this.$refs.Views.showFile(this.src)
      })
    },
  }
  }

三、子页面previewFile(预览页面)代码

<template>
  <div class="viewBox" v-if="isShow">
    <!-- pdf预览 -->
    <div class="wrap-pdf" v-if="type === 'pdf'">
      <div class="pdf">
	  <div class="pdf-tab">
	    <div
	      class="btn-def"
	      @click.stop="prePage"><span>上一页</span>
	    </div>
	    <div
	      class="btn-def"
	      @click.stop="nextPage"><span>下一页</span>
	    </div>
	  </div>
	  <div style="text-align: center;">{{pageNum}}/{{pageTotalNum}}</div>
	  <div class="any-scroll-view">
	    <div ref="body">
	      <pdf
	        id="pdfPreview"
	        ref="pdf"
	        :src="pdfSrc"
	        :page="pageNum"
	        :rotate="pageRotate"
	        @password="password"
	        @progress="loadedRatio = $event"
	        @page-loaded="pageLoaded($event)"
	        @num-pages="pageTotalNum=$event"
	        @error="pdfError($event)"
	        @link-clicked="page = $event">
	      </pdf>
	    </div>
	  </div>
	</div>
      <!-- <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item"/> -->
    </div>
    <!-- 表格组件 -->
    <div class="table-box" v-if="type === 'excel'">
      <van-tabs
          class="table-tab"
          v-if="sheetNames.length"
          title-active-color="#07AC7F"
          color="#07AC7F"
          @click="clickTab">
          <van-tab
              v-for="(item, index) in sheetNames"
              :key="index"
              :name="item"
              :title="item"></van-tab>
      </van-tabs>
      <div class="tableBox" ref="excPreview"></div>
    </div>
		<!-- 关闭按钮 -->
      <van-icon class="closeBtn" name="cross" @click="isShow = false" />
	</div>
</template>

<script>
import { ImagePreview } from 'vant'
import pdf from 'vue-pdf' 
import XLSX from 'xlsx'
export default {
  name: 'PreviewFile',
  components: {
    pdf
  },
  props: {
    datas: {},
    type: {}
  },
  data() {
    return {
      isShow: false,
      numPages: 1,
      pdfSrc: '',
      sheetNames: [],
      pageNum: 1,
      wsObj: {},
        pageTotalNum:1,
        pageRotate:0,
        // 加载进度
        loadedRatio:0,
        curPageNum:0,
    }
  },
  
  methods: {
    showFile(newVal) {
      console.log('----', newVal)
      if (this.type === 'img') {
        const that = this
        ImagePreview({
          images: [newVal],
          onClose() {
            that.isShow = false
          }
        })
      } else if (this.type === 'pdf') {
        this.pdfSrc = pdf.createLoadingTask(newVal)
      } else if (this.type === 'excel') {
        var xhr = new XMLHttpRequest()
        xhr.open('get', newVal, true)
        xhr.responseType = 'arraybuffer'
        let _this = this
        xhr.onload = function (e) {
          let that=this;
          var binary = "";
          if (xhr.status === 200) {
            var bytes  = new Uint8Array(xhr.response)
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i]);
            }
            var wb = XLSX.read(binary, { type: "binary" });
            var wsname = wb.SheetNames[0];
            var ws = wb.Sheets[wsname];
             _this.sheetNames = [...wb.SheetNames] // 数组
        _this.wsObj = { ...wb.Sheets }
        _this.changeExcel(_this.sheetNames[0])
          }
        }
        xhr.send()
      }
    },
    clickTab(name) {
      this.changeExcel(name)
    },
    prePage(){
        var p = this.pageNum
        p = p>1?p-1:this.pageTotalNum
        this.pageNum = p
      },
      nextPage(){
        var p = this.pageNum
        p = p<this.pageTotalNum?p+1:1
        this.pageNum = p
      },
      password(updatePassword, reason) {
        updatePassword(prompt('password is "123456"'))
      },
      pageLoaded(e){
        this.curPageNum = e
      },
      pdfError(error){
        console.error(error)
      },
    changeExcel(item) {
      // 获取当前选中表格对象
      const ws = this.wsObj[item]
      console.log(ws);
      const keyArr = Object.keys(ws) || []
      const HTML = keyArr.length > 1 ? XLSX.utils.sheet_to_html(ws)
        : '<html><head><meta charset="utf-8"/>' +
                    '<title>SheetJS Table Export</title></head><body><div class="myTable">暂无数据</div></body>' +
                    '</html>'
      this.$nextTick(() => {
        this.$refs.excPreview.innerHTML = HTML
        // 获取表格dom元素
        const tables = this.$refs.excPreview.children[2]
        // 添加完毕后 通过空格将数组组装为字符串
        tables.className = 'myTable'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.excel-container {
  width: 100%;
}
table {
    display: table;
    border-collapse: collapse;
    box-sizing: border-box;
    border:  1px solid #929292;
    width: auto;height: auto;color: #333333;// 合并边框
    th,tr{
      white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background: #ffffff;padding: 10px;border:1px solid #929292;
      td{
        font-weight: normal;
        text-align: center;
        border:1px solid #929292;
      }
    }
}
.tableBox {width: 100vw;height: calc(100vh - 44px);overflow: auto;
}// 表格边框
.pdf-tab {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 .4rem;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.pdf-tab .btn-def {
    border-radius: .2rem;
    font-size: 0.5rem;
    // height: 40px;
    margin-top: 40px;
    // width: 6.4rem;
    text-align: center;
    // line-height: 1.93333rem;
    background: #409eff;
    color: #fff;
    // margin-bottom: 1.26667rem;
}
.pdf-total {
    text-align: center;
    font-size: 1.45333rem;
}
.pdf-process, .pdf-total {
    text-align: center;
    font-size: 1.45333rem;
}
.pdf-num {
    margin-bottom: 1.2rem;
}

.pdf-box, .word-box, .table-box, .txt-box {
  width: 100vw;
  height: 100vh;
}
.viewBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  .closeBtn {
    position: absolute;
      top: 10px;
      right: 10px;
      z-index: 10;
      font-size: 24px;
  }
}
</style>

缺点:excel预览显示不了边框,word预览还没有找到好的解决方案!!!有找到word移动端预览和解决了excel预览边框显示的小伙伴可以私聊我。

效果图如下:

以上就是Vue移动端实现pdf/excel/图片在线预览的详细内容,更多关于Vue在线预览的资料请关注脚本之家其它相关文章!

相关文章

  • 前端vue中实现文件下载的几种方法总结

    前端vue中实现文件下载的几种方法总结

    这篇文章主要介绍了前端vue中实现文件下载的几种方法总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Element-ui upload上传文件限制的解决方法

    Element-ui upload上传文件限制的解决方法

    这篇文章主要介绍了Element-ui upload上传文件限制的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • vue 项目中当访问路由不存在的时候默认访问404页面操作

    vue 项目中当访问路由不存在的时候默认访问404页面操作

    这篇文章主要介绍了vue 项目中当访问路由不存在的时候默认访问404页面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 如何将iconfont图标引入到vant的Tabbar标签栏里边

    如何将iconfont图标引入到vant的Tabbar标签栏里边

    这篇文章主要介绍了如何将iconfont图标引入到vant的Tabbar标签栏里边,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue 3.0 v-for中的Ref数组用法小结

    Vue 3.0 v-for中的Ref数组用法小结

    在 Vue 2 中,在 v-for 里使用的 ref attribute会用ref 数组填充相应的 $refs property,本文给大家介绍Vue 3.0 v-for中的Ref数组的相关知识,感兴趣的朋友一起看看吧
    2023-12-12
  • 手把手教你Vue3 按需引入 Echarts的过程(收藏)

    手把手教你Vue3 按需引入 Echarts的过程(收藏)

    新项目采用 Vue3 作为前端项目框架,避免不了要使用 echarts,但是在使用的时候,出现了与 Vue2 使用不一样的地方,所以特别记下来,希望给到有需要的同学一些帮助
    2023-10-10
  • Vue组件通信的几种实现方法

    Vue组件通信的几种实现方法

    这篇文章主要介绍了Vue组件通信的几种实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue Vine实现一个文件中写多个组件的方法(最近很火)

    Vue Vine实现一个文件中写多个组件的方法(最近很火)

    Vue Vine提供了全新Vue组件书写方式,主要的卖点是可以在一个文件里面写多个vue组件,Vue Vine是一个vite插件,vite解析每个模块时都会触发插件的transform钩子函数,本文介绍Vue Vine是如何实现一个文件中写多个组件,感兴趣的朋友一起看看吧
    2024-07-07
  • vue.js 输入框输入值自动过滤特殊字符替换中问标点操作

    vue.js 输入框输入值自动过滤特殊字符替换中问标点操作

    这篇文章主要介绍了vue.js 输入框输入值自动过滤特殊字符替换中问标点操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 如何在Vue3中使用Ref访问DOM元素详解

    如何在Vue3中使用Ref访问DOM元素详解

    在Vue3中可以使用`ref`来获取DOM元素,下面这篇文章主要给大家介绍了关于如何在Vue3中使用Ref访问DOM元素的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09

最新评论