vue-pdf放大缩小，上一页下一页，滚动翻页

admin管理员组

文章数量:1648572

以下是上一页下一页，放大缩小：

<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();
	},

本文标签： 下一页上一页翻页vuePDF