fix(仪表板、数据大屏): 修复调用浏览器打印功能出现部分页码空白问题 (#16549)

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -198,6 +198,36 @@ const canvasStyle = computed(() => {
   return style
 })
 
+const getDownloadStatusMainHeightV2 = () => {
+  if (!previewCanvas.value?.childNodes) {
+    nextTick(() => {
+      canvasStyle.value.height = getDownloadStatusMainHeight()
+    })
+    return '100%'
+  }
+  const children = previewCanvas.value.childNodes
+  let maxBottomPosition = 0
+
+  children.forEach(child => {
+    // 获取style中的top值
+    const styleTop = child.style?.top || 0
+    // 获取style中的height
+    const styleHeight = child.style?.height || 0
+
+    // 转换为数字
+    const top = parseFloat(styleTop) || 0
+    const height = parseFloat(styleHeight) || 0
+
+    // 计算底部位置
+    const bottomPosition = top + height
+
+    if (bottomPosition > maxBottomPosition) {
+      maxBottomPosition = bottomPosition
+    }
+  })
+  return `${maxBottomPosition}px`
+}
+
 const getDownloadStatusMainHeight = () => {
   if (!previewCanvas.value?.childNodes) {
     nextTick(() => {
@@ -487,7 +517,7 @@ const showUnpublishFlag = computed(() => dvInfo.value?.status === 0 && isMainCan
 
 defineExpose({
   restore,
-  getDownloadStatusMainHeight
+  getDownloadStatusMainHeightV2
 })
 </script>
 

core/core-frontend/src/views/data-visualization/PreviewCanvas.vue

@@ -39,7 +39,7 @@ const state = reactive({
     top: 3,
     left: 3
   },
-  containerMainHeight: '3000px'
+  containerMainHeight: '1000px'
 })
 
 const props = defineProps({
@@ -229,15 +229,6 @@ const dataVKeepSize = computed(() => {
   return state.canvasStylePreview?.screenAdaptor === 'keep'
 })
 
-watch(
-  () => state.containerMainHeight,
-  newVal => {
-    if (previewCanvasContainer.value) {
-      previewCanvasContainer.value.style.setProperty('--print-height', newVal)
-    }
-  }
-)
-
 const freezeStyle = computed(() => {
   return [
     { '--top-show-offset': state.showOffset.top },
@@ -248,8 +239,8 @@ const freezeStyle = computed(() => {
 
 const dvPreview = ref(null)
 const getPrintHeight = async () => {
-  if (dvPreview.value && dvPreview.value.getDownloadStatusMainHeight) {
-    state.containerMainHeight = await dvPreview.value.getDownloadStatusMainHeight()
+  if (dvPreview.value) {
+    state.containerMainHeight = await dvPreview.value.getDownloadStatusMainHeightV2()
   }
 }