标签：one ima 文件夹 log 参考 wrap mbed event example
方法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‘
注册组件：
components:{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下一页
标签：one ima 文件夹 log 参考 wrap mbed event example
原文地址：https://www.cnblogs.com/xiaofenguo/p/12895969.html
