预览缩放问题处理

src/views/report/freeReport/freeReportPreview.vue

@@ -17,7 +17,6 @@ const scaleContainer = ref(null);
 const reportId = ref(route.query.id || '');
 const reportInfo = ref({});
 const pageList = ref([]);
-const pageHeight = ref(1698);
 const bgColor = ref('');
 const scaleStyle = ref({ transform: 'scale(1)', transformOrigin: 'top left', width: '1200px' })
 const contentHeight=ref(1000);
@@ -180,14 +179,14 @@ onUnmounted(() => {
 <template>
     <div class="free-report-scale-outer" :style="{ height: contentHeight + 'px' }">
         <div class="free-report-detail" ref="scaleContainer" :style="scaleStyle">
-            <div id="reportdtl" class="main-box">
-                <div v-for="(item,index) in pageList" :key="index + 1" class="report-content-box" :style="{backgroundColor:bgColor,height:pageHeight+'px',}">
+            <div id="reportdtl" class="main-box" style="width: 1200px;">
+                <div v-for="(item,index) in pageList" :key="index + 1" class="report-content-box" :style="{backgroundColor:bgColor,height:'1698px'}">
                     <!-- 版头 -->
-                    <div class="border-wrap" v-if="showHeaderWrap(item)">
-                        <div class="page-header-wrap" v-html="pageConfig.pageEditObject.header.html"></div>
+                    <div class="border-wrap" style="min-height: 30px;max-height: 100px;" v-if="showHeaderWrap(item)">
+                        <div class="page-header-wrap" style="min-height: 30px;max-height: 100px;" v-html="pageConfig.pageEditObject.header.html"></div>
                     </div>
                     <div v-html="item.Content" class="content-wrap"></div>
-                    <div class="border-wrap" v-if="showFooterWrap(item)">
+                    <div class="border-wrap" style="min-height: 30px;max-height: 100px;" v-if="showFooterWrap(item)">
                         <div
                             v-if="showFooterPage(item)"
                             :style="`position:absolute;bottom:6px;${getPageNumberPosition(pageConfig.pageEditObject.page.align)}`"
@@ -195,6 +194,7 @@ onUnmounted(() => {
                         <div
                             v-if="showFooterMessage(item)" 
                             class="page-header-wrap" 
+                            style="min-height: 30px;max-height: 100px;"
                             v-html="pageConfig.pageEditObject.footer.html"></div>
                         </div>
                 </div>
@@ -234,13 +234,12 @@ div{
     left: 0;
     .main-box{
         margin: 0 auto;
-        width: 1200px;
         padding: 0;
         overflow: hidden;
         position: relative;
         .report-content-box{
             margin-bottom: 20px;
-            width: 100%;
+            width:100%;
             background: #FFF;
             box-sizing: border-box;
             overflow: hidden;
@@ -277,11 +276,7 @@ div{
       }
         .border-wrap{
             position: relative;
-            min-height: 30px;
-            max-height: 100px;
             .page-header-wrap,.page-footer-wrap{
-                min-height: 30px;
-                max-height: 100px;
                 overflow: hidden;
             }
         }