vue-pdf拡大縮小、前ページ次ページ、スクロールページ

次は前のページと次のページで、拡大縮小します.

 
    ：
  

        
        

            
   
        
        

            
   
        
    

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

以下はページをスクロールして、簡単明瞭です.

 

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