vue-pdf放大缩小,上一页下一页,滚动翻页
vue-pdf
vue.js pdf viewer
项目地址:https://gitcode.com/gh_mirrors/vu/vue-pdf
免费下载资源
·
以下是上一页下一页,放大缩小:
<pdf :src="path" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf"></pdf>
翻页缩小:
<ul class="footers">
<li :class="{select:idx==2}" @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)">
<p>上一页</p>
</li>
<li :class="{select:idx==3}" @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)">
<p>下一页</p>
</li>
</ul>
import pdf from "vue-pdf";
export default {
name: "inspectionPresentation",
components: {
pdf
},
data() {
return {
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
path: this.$route.params.path,
scale: 100, //放大系数
idx: -1,
clauseTitle: "",
loadedRatio: 0
};
},
methods{
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage(val) {
if(val === 0 && this.currentPage > 1) {
this.currentPage--;
}
if(val === 1 && this.currentPage < this.pageCount) {
this.currentPage++;
}
},
goBack() {
this.$router.go(-1);
},
// 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 + ")";
},
}
以下是滚动翻页,简单明了:
<pdf v-for="item in numPages" :key="item" :src="src" :page="item" />
import pdf from "vue-pdf";
export default {
name: "inspectionPresentation",
components: {
pdf
},
data() {
return {
numPages: "",
src: this.$route.params.path,// pdf文件地址
};
methods: {
// pdf加载时
loadPdfHandler() {
this.src.then(pdf => {this.numPages = pdf.numPages;});
}
created() {
this.src = pdf.createLoadingTask(this.src);this.loadPdfHandler();
},
GitHub 加速计划 / vu / vue-pdf
1
1
下载
vue.js pdf viewer
最近提交(Master分支:4 个月前 )
a9f01b23 - 10 个月前
c188a043
add open_collective vue-pdf 10 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)