diff --git a/core/core-frontend/index.html b/core/core-frontend/index.html
index 82a8495798..5082b452a5 100644
--- a/core/core-frontend/index.html
+++ b/core/core-frontend/index.html
@@ -1,16 +1,17 @@
-
+
+
-
-
+
+
-
\ No newline at end of file
+
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index bafbc843c1..7b7a3f90b7 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -486,7 +486,8 @@ const scrollPreview = () => {
const showUnpublishFlag = computed(() => dvInfo.value?.status === 0 && isMainCanvas(canvasId.value))
defineExpose({
- restore
+ restore,
+ getDownloadStatusMainHeight
})
diff --git a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
index dd600d7cf1..acb053caab 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
@@ -38,7 +38,8 @@ const state = reactive({
showOffset: {
top: 3,
left: 3
- }
+ },
+ containerMainHeight: '3000px'
})
const props = defineProps({
@@ -216,17 +217,52 @@ onMounted(async () => {
return
}
dvMainStore.setEmbeddedCallBack(callBackFlag || 'no')
+
+ window.matchMedia('print').addListener(async mql => {
+ if (mql.matches) {
+ await prepareForPrint()
+ }
+ })
})
const dataVKeepSize = computed(() => {
return state.canvasStylePreview?.screenAdaptor === 'keep'
})
-const freezeStyle = computed(() => [
- { '--top-show-offset': state.showOffset.top },
- { '--left-show-offset': state.showOffset.left }
-])
+watch(
+ () => state.containerMainHeight,
+ newVal => {
+ if (previewCanvasContainer.value) {
+ previewCanvasContainer.value.style.setProperty('--print-height', newVal)
+ }
+ }
+)
+const freezeStyle = computed(() => {
+ return [
+ { '--top-show-offset': state.showOffset.top },
+ { '--left-show-offset': state.showOffset.left },
+ { '--print-height': state.containerMainHeight }
+ ]
+})
+
+const dvPreview = ref(null)
+const getPrintHeight = async () => {
+ if (dvPreview.value && dvPreview.value.getDownloadStatusMainHeight) {
+ state.containerMainHeight = await dvPreview.value.getDownloadStatusMainHeight()
+ }
+}
+
+// 打印前准备
+const prepareForPrint = async () => {
+ await getPrintHeight()
+}
+
+// 暴露方法给外部调用打印
+const handlePrint = async () => {
+ await prepareForPrint()
+ window.print()
+}
defineExpose({
loadCanvasDataAsync
})
@@ -279,6 +315,19 @@ defineExpose({
/>
+
+