vue 实现在线预览PDFpdf文件

简介: vue 实现在线预览PDFpdf文件


功能描述

最近在项目开发中,客户有这样一个需求:在线预览上传上去的PDF文件,之前没接触过这块,通过查阅资料,发现有个PDF预览组件,只需要引入进来就可以,下面来进入到干货模式!!!

前端代码

第一步

在components下创建PdfView文件夹,并创建一个.vue文件

第二步

将下面的代码复制到(index.vue).vue文件里,

<template>
  <div style="background-color: #FFFFFF;width: 100%;margin: 0 auto;">
    <pdf
      :page="pageNum"
      :src="url"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum=$event"
    ></pdf>
    <br>
    <el-button-group style="position: relative;top: 8%;left: 43%;transform: translate(-50%,-50%);">
      <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
      <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <div style="marginTop: 10px; color: #409EFF;text-align: center;">{{ pageNum }} / {{ pageTotalNum }}</div>
    <br>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components: {
    pdf,
  },
  props: {
    url: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      pageNum: 1,
      pageTotalNum: 1, //总页数
      loadedRatio: 0, //当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了
    }
  },
  created() {
    console.log(this.url,"pdf")
  },
  methods: {
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
      document.getElementById("pdfId").scrollIntoView();
    },
    // 下一页
    nextPage() {
      //找到元素 scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
      document.getElementById("pdfId").scrollIntoView();
    }
  }
}
</script>

第三步

在需要使用这个组件的.vue文件里注入进来,注意 引入的路径是否正确,这段代码我就不贴出来了,自行写一下就可以,一共就两行。

第四步

重点:使用pdf组件

解释

filePreviewModal:是否显示的意思,定义这么一个全局变量即可,默认为false不显示。

filePreviewUrl:文件地址。

<a @click="filePreview(record)" v-if="roleCOde=='admin'">预览</a>
<j-modal :visible='filePreviewModal' :width='1400' cancelText='关闭' switchFullscreen title="预览" @cancel="filePreviewModal = false">
     <template>
       <div>
         <pdfView :url="filePreviewUrl" style="width: 600px;height: 900px;"></pdfView>  
       </div>
     </template>
     <template slot="footer">
       <div>
         <a-button type="white" @click="filePreviewModal = false">关闭</a-button>
       </div>
     </template>
</j-modal>

filePreviewUrl:上传文件的地址+文件名

filePreview(record){
       this.filePreviewUrl = 'http://'+record.document
       this.filePreviewModal = true
     },

结束语

有兴趣的博主们可以关注一下,后期会经常分享在项目开发中遇到一些新的功能以及处理的Bug会及时更新在本博主的主页中哦!!!

目录
相关文章
|
3天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
2天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
8 1
|
2天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
10 0
|
2天前
|
JavaScript
vue知识点
vue知识点
10 0
|
3天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
3天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
3天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
6 0
|
3天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
3天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
3天前
|
JavaScript
vue封装svg
vue封装svg
7 0