【vue-pdf】PDF文件预览插件

1 插件安装

npm install vue-pdf

vue-pdf GitHub：https://github.com/FranckFreiburger/vue-pdf#readme

参考文档：https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html

catch报错：vue-pdf组件报错vue-pdf Cannot read properties of undefined (reading 'catch')_你看我像是会的样子吗？的博客-CSDN博客

2 代码示例

Example.01 超简单分页预览

<template>
    <div class="container">
      <div class="header">
        <van-nav-bar
          title="文件预览"
          left-text="关闭"
          left-arrow
          @click-left="returnTo"
        />
      </div>
      <div class="main">
        <pdf
          :src="src"
          :page="currentPage"
          @num-pages="pageCount=$event"
          @page-loaded="currentPage=$event"
          @loaded="loadPdfHandler">
        </pdf>
      </div>
      <div class="footer">
        <van-pagination v-model="currentPage" :page-count="pageCount" mode="simple"/>
      </div>
    </div>
</template>

<script>
  import pdf from 'vue-pdf'
  // 引入api
  import { getItemDetailAPI } from '@/api'

  export default {
    name: 'PreView',
    components: {
      pdf
    },
    data () {
      return {
        file_id: '',
        src: '',
        currentPage: 0, // pdf文件页码
        pageCount: 0 // pdf文件总页数
      }
    },
    created () {
      this.file_id = this.$route.query.item_id
      // this.fetchFileDetail()
      this.src = '/files/xxxx.pdf' // 本地测试版
    },
    methods: {
      returnTo () {
        // this.$router.go(-1)
        this.$router.back() // 返回
      },
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },
      // 根据fileId获取文件
      async fetchFileDetail () {
        /** 文件地址 **/
          // this.src = `/hbdjv1/files/${this.file_name}` // 发布版
          // this.src = `/files/${this.file_name}` // 本地测试版
        const params = {
            file_id: this.file_id
          }
        this.$toast.loading({ // 打开toast提示
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 0
        })
        console.log('=====文件详情===')
        console.log(params)
        const res = await getItemDetailAPI(params)
        this.$toast.clear() // 关闭toast
        if (res && res.code === 200) {
          if (res.data && res.data.length > 0) {
            this.src = res.data[0].url
          }
        }
      }
    }
  }
</script>

Example.02 少于20页滚动预览，多于20分页预览

<template>
  <div class="container">
    <div class="header">
      <van-nav-bar
        title="文件预览"
        left-text="关闭"
        left-arrow
        @click-left="returnTo"
      />
    </div>
    <div class="main" v-if="loaded">
      <!-- 页数 <= 20 直接滑动 -->
      <div v-show="pageCount <= divider ">
        <pdf v-for="index in pageCount" :key="index" :src="src" :page="index"></pdf>
      </div>
      <!-- 页数 > 20 分页 -->
      <div v-show="pageCount > divider">
        <pdf
          :src="src"
          :page="currentPage"
          @num-pages="pageCount=$event"
          @page-loaded="currentPage=$event"
          @loaded="loadPdfHandler">
        </pdf>
      </div>
    </div>
    <div class="footer" v-show="pageCount > divider" v-if="loaded">
      <van-pagination v-model="currentPage" :page-count="pageCount" mode="simple"/>
    </div>
    <van-empty description="文件加载失败" v-else/>
  </div>
</template>

<script>
  import pdf from 'vue-pdf'
  // 引入api
  import { getItemDetailAPI } from '@/api'

  export default {
    name: 'PreView',
    components: {
      pdf
    },
    data () {
      return {
        file_id: '',
        src: '',
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        divider: 20, // 设置分割数
        loaded: false
      }
    },
    created () {
      this.file_id = this.$route.query.item_id
      this.fetchFileDetail()
    },
    methods: {
      returnTo () {
        // this.$router.go(-1)
        this.$router.back() // 返回
      },
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },
      // 根据fileId获取文件
      async fetchFileDetail () {
        /** 文件地址 **/
          // this.src = `/hbdjv1/files/${this.file_name}` // 发布版
          // this.src = `/files/${this.file_name}` // 本地测试版
        const params = {
            file_id: this.file_id
          }
        this.$toast.loading({ // 打开toast提示
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 0
        })
        console.log('=====文件详情===')
        console.log(params)
        const res = await getItemDetailAPI(params)
        this.$toast.clear() // 关闭toast
        if (res && res.code === 200) {
          if (res.data && res.data.length > 0) {
            // this.src = res.data[0].url
            this.src = pdf.createLoadingTask(res.data[0].url)
            this.src.promise.then(pdf => {
              this.$nextTick(() => {
                this.pageCount = pdf.numPages // pdf总页数
                this.loaded = true
              })
            })
          }
        }
      }
    }
  }
</script>