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