一篇文章教会你使用Vue-pdf完成对后台返回的文件流进行PDF预览功能

一篇文章教会你使用Vue-pdf完成对后台返回的文件流进行PDF预览功能

前言：封装vue-pdf组件为预览页面，通过unstructured.vue路由传参形式跳转到预览页面

一、unstructured.vue

// 预览
async preview(row){
  // 这个代码我不多做解释，接口请求而已
  let res = await downLoadSourceFile({
    bucket:'pdf',
    objectName:res_str+'.pdf',
    originName:row.pdfPath
  })
  // 直接使用createObjectURL可能会出现问题
  // 所以我建议使用下面这种方式将文件流转化为本地blod地址
  var binaryData = []
  binaryData.push(res)
  // 记得一定要设置application的类型
  let url = window.URL.createObjectURL(new Blob(binaryData, {type:"application/pdf"}));
  if(url !=null && url !=undefined && url){
    // vue路由跳转并以问号形式携带vue-pdf预览时所需要的pdf地址
    let routeData = this.$router.resolve(`/finddata/vue-pdf?url=${url}`)
    // 新页面打开
    window.open(routeData.href, '_blank')
  }
},

二、vue-pdf.vue

HTML部分，无需修改，复制可直接使用

<template>
<div id="container">
  
  <div class="right-btn">
    
    <div class="pageNum">
      <input v-model.number="currentPage" type="number" class="inputNumber" @input="inputEvent()"> / {{pageCount}}
    div>
    <div @click="changePdfPage('first')" class="turn">
      首页
    div>
    
    <div @click="changePdfPage('pre')" class="turn-btn" :style="currentPage===1?'cursor: not-allowed;':''">
      上一页
    div>
    <div @click="changePdfPage('next')" class="turn-btn" :style="currentPage===pageCount?'cursor: not-allowed;':''">
      下一页
    div>
    <div @click="changePdfPage('last')" class="turn">
      尾页
    div>
  div>

  <div class="pdfArea">
      // 小白不要改动这里的方法和属性,复制就直接可以用
    <pdf :src="src" ref="pdf" v-show="loadedRatio===1" :page="currentPage" @num-pages="pageCount=$event" @progress="loadedRatio = $event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" @link-clicked="currentPage = $event" style="display: inline-block;width:100%" id="pdfID">pdf>
  div>
  
  <div class="progress" v-if="loadedRatio!=1">
    <el-progress type="circle" :width="70" color="#53a7ff" :percentage="Math.floor(loadedRatio * 100) ? Math.floor(loadedRatio * 100) : 0">el-progress>
    <br>
    
    <span>{{remindShow}}span>
  div>
div>
template>

JS部分，无需修改，复制可直接使用

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data() {
    return {
      // ----- loading -----
      remindText: {
        loading: '加载文件中，文件较大请耐心等待...',
        refresh: '若卡住不动，可刷新页面重新加载...'
      },
      remindShow: '加载文件中，文件较大请耐心等待...',
      intervalID: '',
      // ----- vuepdf -----
      // src静态路径: /static/xxx.pdf
      // src服务器路径: 'http://.../xxx.pdf'
      src: '',
      // 当前页数
      currentPage: 0,
      // 总页数
      pageCount: 0,
      // 加载进度
      loadedRatio: 0
    }
  },
  created() {
    // 页面加载，拿到路由中的url复制给data中的src
    this.src = this.$route.query.url
  },
  mounted() {
    // // 更改 loading 文字
    this.intervalID = setInterval(() => {
      this.remindShow === this.remindText.refresh ?
        this.remindShow = this.remindText.loading :
        this.remindShow = this.remindText.refresh
    }, 4000)
  },
  methods: {
    // 页面回到顶部
    toTop() {
      document.getElementById('container').scrollTop = 0
    },
    // 输入页码时校验
    inputEvent() {
      if (this.currentPage > this.pageCount) {
        // 1. 大于max
        this.currentPage = this.pageCount
      } else if (this.currentPage < 1) {
        // 2. 小于min
        this.currentPage = 1
      }
    },
    // 切换页数
    changePdfPage(val) {
      if (val === 'pre' && this.currentPage > 1) {
        // 切换后页面回到顶部
        this.currentPage--
        this.toTop()
      } else if (val === 'next' && this.currentPage < this.pageCount) {
        this.currentPage++
        this.toTop()
      } else if (val === 'first') {
        this.currentPage = 1
        this.toTop()
      } else if (val === 'last' && this.currentPage < this.pageCount) {
        this.currentPage = this.pageCount
        this.toTop()
      }
    },

    // pdf加载时
    loadPdfHandler(e) {
      // 加载的时候先加载第一页
      this.currentPage = 1
    },
  },
  destroyed() {
    // 在页面销毁时记得清空 setInterval
    clearInterval(this.intervalID)
  },
}
</script>

CSS部分，可根据自己的需求自行修改