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-bartitle="文件预览"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'// 引入apiimport { 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() // 关闭toastif (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-bartitle="文件预览"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'// 引入apiimport { 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_idthis.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() // 关闭toastif (res && res.code === 200) {if (res.data && res.data.length > 0) {// this.src = res.data[0].urlthis.src = pdf.createLoadingTask(res.data[0].url)this.src.promise.then(pdf => {this.$nextTick(() => {this.pageCount = pdf.numPages // pdf总页数this.loaded = true})})}}}}}
</script>