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();
	},
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现在vue-pdf放大缩小以及滚动条的效果,你可以在vue组件中引入pdfjs库,然后使用pdfjs提供的API来实现: 1. 安装pdfjs: ``` npm install pdfjs-dist --save ``` 2. 引入pdfjs: ``` import pdfjsLib from 'pdfjs-dist'; ``` 3. 加载pdf文件: ``` pdfjsLib.getDocument(url).promise.then(pdf => { // 加载完成后的处理逻辑 }); ``` 4. 渲染pdf: ``` pdf.getPage(pageNumber).then(page => { const canvas = document.getElementById('canvas'); const viewport = page.getViewport({ scale: scale }); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext).promise.then(() => { // 渲染完成后的处理逻辑 }); }); ``` 5. 实现放大缩小: ``` const zoomInButton = document.getElementById('zoom-in'); const zoomOutButton = document.getElementById('zoom-out'); let scale = 1; zoomInButton.addEventListener('click', () => { scale += 0.1; renderPage(pageNumber, scale); }); zoomOutButton.addEventListener('click', () => { scale -= 0.1; renderPage(pageNumber, scale); }); ``` 6. 实现滚动条: ``` const container = document.getElementById('container'); container.addEventListener('scroll', () => { const scrollTop = container.scrollTop; const pageHeight = canvas.height * scale; if (scrollTop + container.offsetHeight >= pageHeight) { // 滚动到底部的处理逻辑 } }); ``` 以上是一个大体的实现思路,具体的实现过程可能还需要根据具体的需求来进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值