vue 实现页面中pdf区域的手势放大缩小操作

原创已于 2023-10-30 14:26:50 修改 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #pdf #前端

于 2023-10-30 14:16:56 首次发布

随笔专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue2.0应用中使用vue-pdf和easyscroller库，实现在网页上加载PDF文件，并允许用户进行局部区域的双指放大和缩小，同时提供了PDF页面计数功能。

使用技术

vue2.0 + vue-pdf + easyscroller

代码实现

<template>
  <div id="zoomBox">
	<pdf
      v-for="i in numPages"
      :key="i"
      :page="i"
      :src="initData.url"
    >
    </pdf>
  </div>
</template>

<script>
// npm i easyscroller --save     实现局部区域 双指放大缩小
import { EasyScroller } from "easyscroller";
// npm install --save vue-pdf    实现下载pdf链接渲染显示
import pdf from "vue-pdf";

export default {
  components: { pdf }, // 注册 pdf
	
  data() {
    return {
      pdfUrl: "www.xxxxxx.com", // 假设该url是后端提供pdf的链接
      scroller: null, // 获取手势操作项
      numPages: null, // pdf文档的页数
    };
  },
  
  mounted() {
    this.zoomBox();
    this.pafPage();
  },
 
  methods: {
    // 配置div的放大缩小
    zoomBox() {
      const ele = document.querySelector("#zoomBox");
      this.scroller = new EasyScroller(ele, {
        scrollingX: true,
        scrollingY: true,
        zooming: true,
        minZoom: 0.5, // 最小缩放
        maxZoom: 5, // 最大缩放
        zoomLevel: 1, // 初始值缩放
        bouncing: true
      });
    },

	// 计算pdf文档的页数
	pafPage() {
      let loadingTask = pdf.createLoadingTask(this.pdfUrl);
      loadingTask.promise.then(pdf => {
        this.numPages= pdf._pdfInfo.numPages;
      });
    },


  },

  beforeDestroy() {
    this.scroller.destroy(); // 销毁
  },
};
</script>