1、插件引入
import AlloyFinger from "alloyfinger";
import Transform from "css3transform";
2、HTML
<!-- pdf 区域 -->
<van-popup v-model="showPDF" class="mask" closeable @close="closePdfPop">
<van-loading v-if="pdfLoading" size="24px" vertical
>加载中...</van-loading
>
<div v-else class="pdf-box" ref="pdfBox">
<img :src="pdfSrc" alt="PDF文件" ref="pdfImg" />
</div>
</van-popup>
3、方法处理
// PDF预览
previewPDF(imgPath, id) {
this.pdfSrc = "";
this.showPDF = true;
this.pdfLoading = true;
if (!imgPath) {
this.showPDF = false;
return this.$toast("PDF文件为空");
} else {
this.pdfSrc = this.baseUrl + imgPath;
this.pdfLoading = false;
}
// 图片支持缩放
this.$nextTick(() => {
this.scalePdfImg();
});
return;
let params = {
id,
};
this.$api.home.downPDF(params).then((res) => {
// 流转base64字符串
let baseStr =
`data:application/pdf;base64,` +
btoa(
new Uint8Array(res).reduce(
(data, byte) => data + String.fromCharCode(byte),
""
)
);
this.pdfSrc = baseStr;
this.pdfLoading = false;
// 图片支持缩放
this.$nextTick(() => {
this.scalePdfImg();
});
});
},
closePdfPop() {
// document.getElementsByClassName("pdf-box")[0].scrollTop = 0;
this.pdfSrc = "";
},
// pdf 图片缩放
scalePdfImg() {
// 图片支持缩放
const pdfImg = this.$refs.pdfImg;
Transform(pdfImg, true);
let scale = 1; // 缩放倍数
let startX = 0,
startY = 0;
let boxwidth, boxheight, widthDiff, heightDiff;
// 盒子 宽高
boxwidth = this.$refs.pdfBox.clientWidth;
boxheight = this.$refs.pdfBox.clientHeight;
let af = new AlloyFinger(pdfImg, {
multipointStart: function () {
scale = pdfImg.scaleX;
},
// 手势缩放监听
pinch: function (evt) {
// //e.scale代表两个手指缩放的比例
scale = scale * evt.zoom * 0.5;
if (scale < 1) {
scale = 1;
}
if (scale > 2) {
scale = 2;
} // 禁止缩放两倍大
pdfImg.scaleX = pdfImg.scaleY = scale;
},
pressMove: function (evt) {
if (scale === 1) {
return;
}
widthDiff = (boxwidth * (scale - 1)) / 2;
heightDiff = (boxheight * (scale - 1)) / 2;
if (pdfImg.translateX > widthDiff) {
pdfImg.translateX = widthDiff;
}
if (pdfImg.translateX < -widthDiff) {
pdfImg.translateX = -widthDiff;
}
if (pdfImg.translateY > heightDiff) {
pdfImg.translateY = heightDiff;
}
if (pdfImg.translateY < -heightDiff) {
pdfImg.translateY = -heightDiff;
}
pdfImg.translateX += evt.deltaX; // e.deltaX和e.deltaY代表在屏幕上移动的距离
pdfImg.translateY += evt.deltaY;
evt.preventDefault();
},
// 双击还原
doubleTap: function () {
scale = 1;
startX = 0;
startY = 0;
pdfImg.style.transform = `scale(1)`;
pdfImg.style.transform = `translate(0,0)`;
},
////当手指离开，屏幕只剩一个手指或零个手指触发
multipointEnd: function () {},
});
},