去除缩放后滑动底部的大量空白区域

pages/pdf.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="page-wrappe">
-		<view class="pdf-container" :style="{'transform':'scale('+scale+')'}">
+		<view id="pdfContainer" class="pdf-container" :style="{'transform':'scale('+scale+')', 'height': containerScaledHeight + 'px'}">
 			<!-- 封面 -->
 			<view class="cd_box fm2 adffc" style="margin-top: 20px;height: 868px;">
 				<img class="fm2-logo" src="https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/versionTwo/fm_logo.png">
@@ -133,6 +133,8 @@
             reportData: null,
 			isChartReady: false,
 			scale:1,
+			originalContainerHeight: 0,
+			containerScaledHeight: 'auto', 
             typeDict: {
 				'目的与动机': 'zzdj',
 				'外部流程及系统与架构': 'wbjg',
@@ -212,9 +214,15 @@
             ]
         };
 		
-		this.calculateScaleAndPosition();
+		this.$nextTick(() => {
+			this.calculateScaleAndPosition();
+			this.calculatePdfContainerHeight();
+		});
 		uni.onWindowResize(() => {
 			this.calculateScaleAndPosition();
+			this.$nextTick(() => { // 确保 DOM 更新后再计算高度
+				this.calculatePdfContainerHeight();
+			});
 		});
     },
     methods: {
@@ -232,6 +240,15 @@
 				}
 		    });
 		},
+		calculatePdfContainerHeight() {
+			uni.createSelectorQuery().in(this).select('#pdfContainer').boundingClientRect(rect => {
+				if (rect) {
+					this.originalContainerHeight = rect.height;
+					this.containerScaledHeight = this.originalContainerHeight * this.scale;
+					console.log('原始高度:', this.originalContainerHeight, '缩放比例:', this.scale, '缩放后高度:', this.containerScaledHeight);
+				}
+			}).exec();
+		},
 		downloadZtzdfxImg(){
 			if (!this.isChartReady) return console.log('图表尚未准备好');
 			
@@ -321,6 +338,9 @@
             };
             chart.setOption(option);
 			this.isChartReady = true;
+			this.$nextTick(() => {
+				this.calculatePdfContainerHeight();
+			});
         },
       }
     };
@@ -329,6 +349,8 @@
 <style scoped lang="scss">
 	.page-wrappe{
 		width: 100%;
+		height: 100vh;
+		background: #FFFFFF;
 		overflow-x: hidden;
 		overflow-y: auto;
 		.pdf-container{

static/pdf.scss

@@ -1,8 +1,8 @@
 .cd_box {
 	padding: 20px 0 30px;
 	box-sizing: border-box;
-	position: relative;
-	height: 890px;
+	position: relative;
+	min-height: 891px;
 	color: #111111;
 	.cb_db {
 		.cb_db_l {
@@ -1509,6 +1509,5 @@
 
 .cd_box{
 	width: 100%;
-	height: 891px;
 	color: #A1A1A1;
 }