admin管理员组文章数量:1649155
1.需求
在页面中预览本地在工程文件public/pdfs目录下多页码可翻页的PDF文件
2.实现
(主要功能代码,精简版)
- 安装vue-pdf
npm install vue-pdf
- 引入pdf
import pdf from 'vue-pdf';
和注册components: {pdf},
- js部分
data() {
return {
pageTotalNum: 1, // 总页数
pdfUrl: '', // 文件路径
pageNum: 1, // 当前页数
};
},
props: {
url: {
// 文件地址,格式为 文件名+'.pdf'
type: String,
required: true,
},
},
监听选中文件的变动,拼接路径,即前面pdfUrl
的值,路径这一步很重要!!!
简单来说就是:
- 开发环境路径:
/pdfs/ + 文件名 +.pdf
- 生产环境路径:
线上地址+ pdfs/ + 文件名 +.pdf
watch: {
url: {
// 监听文件地址变化
handler(val) {
if (val) {
// 生产环境下需要加线上地址VUE_APP_PUBLIC_PATH,开发环境不用加
this.pdfUrl =
process.env.NODE_ENV === 'production' ?
`${process.env.VUE_APP_PUBLIC_PATH}pdfs/${this.url}` :
'/pdfs/' + this.url;
}
},
immediate: true,
},
},
methods: {
// 上一页
prePage() {
let page = this.pageNum;
page = page > 1 ? page - 1 : this.pageTotalNum;
this.pageNum = page;
},
// 下一页
nextPage() {
let page = this.pageNum;
page = page < this.pageTotalNum ? page + 1 : 1;
this.pageNum = page;
},
},
- HTML展示使用
PDF部分
<pdf
class="pdf-show"
:src="pdfUrl"
:page="pageNum"
@num-pages="pageTotalNum = $event"
/>
ps: 关于参数解释:
①其中pdfUrl为要预览的文件路径
②pageNum为当前显示第pageNum页
③@num-pages="pageTotalNum = $event"
方法用于计算改pdf页码总数,pageTotalNum
表示总页码数
按钮部分
<div class="tools">
<button
@click="prePage"
class="pdf-button"
>
上一页
</button>
<div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
<button
@click="nextPage"
class="pdf-button"
>
下一页
</button>
</div>
3.完整代码
(包含没用上的代码,自己筛选)
<template>
<div class="pdf-wrapper">
<!-- PDF展示部分 -->
<div class="pdf-content">
<div class="pdf-contain">
<pdf
class="pdf-show"
:src="pdfUrl"
:page="pageNum"
@progress="loadedRatio = $event"
@page-loaded="pageLoaded($event)"
@num-pages="pageTotalNum = $event"
@error="pdfError($event)"
@link-clicked="page = $event"
/>
</div>
</div>
<!-- 按钮部分 -->
<div class="tools">
<button
@click="prePage"
class="pdf-button"
>
上一页
</button>
<!-- 页码 -->
<div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
<button
@click="nextPage"
class="pdf-button"
>
下一页
</button>
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf';
export default {
name: 'PDF',
components: {pdf},
props: {
url: {
type: String,
required: true,
},
},
watch: {
url: {
handler(val) {
if (val) {
console.log(val, 89898);
this.pdfUrl =
process.env.NODE_ENV === 'production' ?
`${process.env.VUE_APP_PUBLIC_PATH}pdfs/${this.url}` :
'/pdfs/' + this.url;
}
},
immediate: true,
},
},
created() {
console.log(this.pdfUrl, 8989);
},
data() {
return {
pageTotalNum: 1,
pdfUrl: '',
pageNum: 1,
// 加载进度
loadedRatio: 0,
curPageNum: 0,
numPages: 0,
};
},
mounted() {
// this.getNumPages()
},
methods: {
getpdf() {
this.$http
.get('/pdfs/文件名.pdf', {baseURL: ''})
.then((res) => {
console.log(res, 'reeeeee');
this.pdfUrl = res.data;
});
},
// 计算pdf页码总数
getNumPages(url) {
const loadingTask = pdf.createLoadingTask(url);
loadingTask
.then((pdf) => {
this.pdfUrl = loadingTask;
this.pageTotalNum = pdf.numPages;
console.log(this.pageTotalNum, 'pageTotalNum');
});
},
// 上一页函数,
prePage() {
let page = this.pageNum;
page = page > 1 ? page - 1 : this.pageTotalNum;
this.pageNum = page;
},
// 下一页函数
nextPage() {
let page = this.pageNum;
page = page < this.pageTotalNum ? page + 1 : 1;
this.pageNum = page;
},
// 页面加载回调函数,其中e为当前页数
pageLoaded(e) {
this.curPageNum = e;
},
// 其他的一些回调函数。
pdfError(error) {
console.error(error);
},
},
};
</script>
<style lang="scss" scoped>
.pdf-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.pdf-wrapper span {
width: 100%;
}
.tools {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 999;
margin-bottom: -3%;
padding-top: 2%;
}
.pdf-content {
display: flex;
justify-content: center;
width: 100%;
height: 98%;
border-radius: 50px;
overflow-x: hidden;
.pdf-contain {
width: 100%;
overflow-x: hidden;
.pdf-show {
width: 100%;
}
}
}
.pdf-button {
width: 240px;
height: 60px;
font-size: 30px;
border-radius: 20px;
}
.pdf-button:hover{
cursor: pointer;
transform: scale(1.2);
}
.page {
font-size: 48px;
color: #fff;
}
</style>
版权声明:本文标题:vue项目实现本地PDF翻页预览功能(使用vue-pdf) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729505233a1203549.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论