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報(bào)錯(cuò)：vue-pdf組件報(bào)錯(cuò)vue-pdf Cannot read properties of undefined (reading ‘catch‘)_你看我像是會(huì)的樣子嗎？的博客-CSDN博客

2 代碼示例

Example.01 超簡(jiǎn)單分頁(yè)預(yù)覽

<template>
    <div class="container">
      <div class="header">
        <van-nav-bar
          title="文件預(yù)覽"
          left-text="關(guān)閉"
          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文件頁(yè)碼
        pageCount: 0 // pdf文件總頁(yè)數(shù)
      }
    },
    created () {
      this.file_id = this.$route.query.item_id
      // this.fetchFileDetail()
      this.src = '/files/xxxx.pdf' // 本地測(cè)試版
    },
    methods: {
      returnTo () {
        // this.$router.go(-1)
        this.$router.back() // 返回
      },
      // 改變PDF頁(yè)碼,val傳過(guò)來(lái)區(qū)分上一頁(yè)下一頁(yè)的值,0上一頁(yè),1下一頁(yè)
      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加載時(shí)
      loadPdfHandler (e) {
        this.currentPage = 1 // 加載的時(shí)候先加載第一頁(yè)
      },
      // 根據(jù)fileId獲取文件
      async fetchFileDetail () {
        /** 文件地址 **/
          // this.src = `/hbdjv1/files/${this.file_name}` // 發(fā)布版
          // this.src = `/files/${this.file_name}` // 本地測(cè)試版
        const params = {
            file_id: this.file_id
          }
        this.$toast.loading({ // 打開(kāi)toast提示
          message: '加載中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 0
        })
        console.log('=====文件詳情===')
        console.log(params)
        const res = await getItemDetailAPI(params)
        this.$toast.clear() // 關(guān)閉toast
        if (res && res.code === 200) {
          if (res.data && res.data.length > 0) {
            this.src = res.data[0].url
          }
        }
      }
    }
  }
</script>

Example.02 少于20頁(yè)滾動(dòng)預(yù)覽，多于20分頁(yè)預(yù)覽文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-622245.html

<template>
  <div class="container">
    <div class="header">
      <van-nav-bar
        title="文件預(yù)覽"
        left-text="關(guān)閉"
        left-arrow
        @click-left="returnTo"
      />
    </div>
    <div class="main" v-if="loaded">
      <!-- 頁(yè)數(shù) <= 20 直接滑動(dòng) -->
      <div v-show="pageCount <= divider ">
        <pdf v-for="index in pageCount" :key="index" :src="src" :page="index"></pdf>
      </div>
      <!-- 頁(yè)數(shù) > 20 分頁(yè) -->
      <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文件頁(yè)碼
        pageCount: 0, // pdf文件總頁(yè)數(shù)
        divider: 20, // 設(shè)置分割數(shù)
        loaded: false
      }
    },
    created () {
      this.file_id = this.$route.query.item_id
      this.fetchFileDetail()
    },
    methods: {
      returnTo () {
        // this.$router.go(-1)
        this.$router.back() // 返回
      },
      // 改變PDF頁(yè)碼,val傳過(guò)來(lái)區(qū)分上一頁(yè)下一頁(yè)的值,0上一頁(yè),1下一頁(yè)
      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加載時(shí)
      loadPdfHandler (e) {
        this.currentPage = 1 // 加載的時(shí)候先加載第一頁(yè)
      },
      // 根據(jù)fileId獲取文件
      async fetchFileDetail () {
        /** 文件地址 **/
          // this.src = `/hbdjv1/files/${this.file_name}` // 發(fā)布版
          // this.src = `/files/${this.file_name}` // 本地測(cè)試版
        const params = {
            file_id: this.file_id
          }
        this.$toast.loading({ // 打開(kāi)toast提示
          message: '加載中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 0
        })
        console.log('=====文件詳情===')
        console.log(params)
        const res = await getItemDetailAPI(params)
        this.$toast.clear() // 關(guān)閉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總頁(yè)數(shù)
                this.loaded = true
              })
            })
          }
        }
      }
    }
  }
</script>

到了這里，關(guān)于【vue-pdf】PDF文件預(yù)覽插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！