作者：罗帅飞1 | 来源：互联网 | 2023-09-09 16:02
篇首语：本文由编程笔记#小编为大家整理，主要介绍了vue中实现在线预览pdf文件相关的知识，希望对你有一定的参考价值。方法1：使用插件pdfObject（Safari不能
篇首语：本文由编程笔记#小编为大家整理，主要介绍了vue中实现在线预览pdf文件相关的知识，希望对你有一定的参考价值。
方法1：使用插件pdfObject（Safari不能正常显示，安卓手机的支持也不好）
npm i pdfobject -S
main.js
Vue.prototype.$PDFObject = PDFObject;
<div id="example1" style="height:600px;width: 80%;margin: 0 auto">div>
mounted(){
let _this=this;
this.$nextTick(function(){
_this.$PDFObject.embed(‘/pdf/test.pdf‘, "#example1");
});
},
我这里用的是vue3,pdf文件放在public文件夹下
对于兼容问题的解决办法，可以参考：https://www.cnblogs.com/wuhuacong/p/9566764.html
方法2 使用插件vue-pdf
npm i vue-pdf -S
在使用的地方：
import pdf from ‘vue-pdf‘
注册组件：
<ul class="pdf_pager">
<li @click="scaleD">
<p>放大p>
li>
<li @click="scaleX">
<p>缩小p>
li>
<li @click="changePdfPage(0)">
<p>上一页p>
li>
<li @click="changePdfPage(1)">
<p>下一页p>
li>
ul>
<pdf src="/pdf/test.pdf" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf">pdf>
可以实现翻页和放大 缩小
方法：
// vue-pdf 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage(val) {
if(val === 0 && this.currentPage > 1) {
this.currentPage--;
}
if(val === 1 && this.currentPage <this.pageCount) {
this.currentPage++;
}
},
// pdf加载时
loadPdfHandler(e) {
this.currentPage = 1; // 加载的时候先加载第一页
},
//放大
scaleD() {
this.scale += 5;
// this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
},
//缩小
scaleX() {
if(this.scale == 100) {
return;
}
this.scale += -5;
this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
// this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
}
// vue-pdf 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
京公网安备 11010802041100号