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 超简单分页预览文章来源:https://www.toymoban.com/news/detail-622245.html
<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分页预览文章来源地址https://www.toymoban.com/news/detail-622245.html
<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>
到了这里,关于【vue-pdf】PDF文件预览插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!