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

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

使用技术

vue2.0 + vue-pdf + easyscroller

代码实现

<template><div id="zoomBox"><pdfv-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 }, // 注册 pdfdata() {return {pdfUrl: "www.xxxxxx", // 假设该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>